I have the following mixin containing media queries:
#mixin respond($breakpoint) {
#if $breakpoint == phone {
#media only screen and (max-width: 37.5em) { #content }; //600px
}
#if $breakpoint == tab-port {
#media only screen and (max-width: 56.25em) { #content }; //900px
}
#if $breakpoint == tab-land {
#media only screen and (max-width: 75em) { #content }; //1200px
}
#if $breakpoint == big-desktop {
#media only screen and (min-width: 112.5em) { #content }; //1800px
}
}
I would like to share the same CSS properties for two of those media queries but I am not succeeding in doing so. I've written it as follows but it doesn't work.
#include respond(phone),
#include respond(tab-port) {
some CSS properties
}
I was wondering if anyone could help. Thanks in advance for doing so!
You would create another mixin with the properties you want them both to share, and then use that in each include.
In mixin files:
#mixin two-device {
#media (max-width: 37.5em) {
#content;
}
#media (max-width: 56.25em) {
#content;
}
}
And then you should use it:
#include two-device {
font-size: 50%;
}
#mixin respond($breakpoint) {
#if $breakpoint == phone {
#media only screen and (min-width: 37.5em) { #content; } //600px
}
#else if $breakpoint == tab-port {
#media only screen and (min-width: 56.25em) { #content;} //900px
}
#else if $breakpoint == tab-land {
#media only screen and (min-width: 75em) { #content; } //1200px
}
#else $breakpoint == big-desktop {
#media only screen and (min-width: 112.5em) { #content; } //1800px
}
}
Related
Is there any efficient way to write this code with less.js:
I've got already 3 variables colors : #vert, #violet and #orange
li {
&:nth-child(1) {
background: #vert;
&:hover,
&.open {
>.dropdown-menu li {
background: #vert;
}
}
}
&:nth-child(2) {
background: #violet;
&:hover,
&.open {
>.dropdown-menu li {
background: #violet;
}
}
}
&:nth-child(3) {
background: #orange;
&:hover,
&.open {
>.dropdown-menu li {
background: #orange;
}
}
}
}
I thought of a mixin, but I'm not writing well: Any help please ?
.colored-menu(#number, #color) {
&:nth-child(#number) {
background: #color;
&:hover,
&.open {
>.dropdown-menu li {
background: #color;
}
}
}
}
and calling it like this:
.colored-menu(1,#vert);
.colored-menu(2,#violet);
.colored-menu(3,#orange);
You can use your approach with some edits:
// mixin
.colored-menu(#number; #color) { // the docs recommends semi-colons instead of commas
&:nth-child(#{number}) { // variable requires curly brackets for interpolation
background: #color;
&:hover,
&.open {
> .dropdown-menu li {
background: #color;
}
}
}
}
// ruleset
li {
.colored-menu(1; #vert);
.colored-menu(2; #violet);
.colored-menu(3; #orange);
}
Also, consider using the each list function:
// list
#colors: #vert, #violet, #orange;
// ruleset
li {
each(#colors, {
&:nth-child(#{index}) {
background: #value;
&:hover,
&.open {
> .dropdown-menu li {
background: #value;
}
}
}
});
}
The output from both approaches are the same (in this instance).
I have such function to calc from pixels to vw and it works perfectly for portrait orientation
#function get-vw($target) {
$vw-context: (320*.01) * 1px;
#return ($target/$vw-context) * 1vw;
}
But awful for landscape orientation. It's a pity but such function doesn't work
#function get-vw($target) {
$vw-context: (320*.01) * 1px;
#media only screen and (orientation: landscape) {
#return ($target/$vw-context) * 1vh;
}
#media only screen and (orientation: portrait) {
#return ($target/$vw-context) * 1vw;
}
}
Has anyone similar problem? How did you solve it?
In css (sass, less, no matter) you can't dynamically set the values. You should generates all properties for all conditions and all orientations in advance.
So #media blocks should be placed in element selector scope. And inside these #media's you should set sizes.
Sassmeister demo.
Sass:
// $target: number in pixels
// $orientation: string - portrait (default) | landscape
#function get-vw($target, $orientation: portrait) {
$vw-context: (320 * .01) * 1px;
$axis-unit: 1vw;
#if ($orientation == landscape) {
// Not shure about 240
$vw-context: (240 * .01) * 1px;
$axis-unit: 1vh;
}
#return ($target / $vw-context) * $axis-unit;
}
a {
#media only screen and (orientation: landscape) {
size: get-vw(12px, landscape);
}
#media only screen and (orientation: portrait) {
size: get-vw(12px);
}
}
Css:
#media only screen and (orientation: landscape) {
a {
size: 5vh;
}
}
#media only screen and (orientation: portrait) {
a {
size: 3.75vw;
}
}
I have a for loop in SASS which loops through page classes to insert a colour break for each module. For example:
#for $i from 1 through 4 { // the loop
.m0#{$i} .module-title{
background-color: nth($m_col_lvl_01_list, $i);
}
//- end loop
}
Which compiles to:
.m01 .module-title{
background-color: green;
}
.m02 .module-title{
background-color: blue;
}
.m03 .module-title{
background-color: yellow;
}
.m04 .module-title{
background-color: orange;
}
In the task I have at the moment it includes .m00 Is there a way of including 00 in the loop?
I think you can still achieve what you want using 0 in the for loop.
$list: (green, blue, orange, red, yellow);
//loop from 0 to the length of the list which isn't hardcoded
#for $i from 0 to length($list) {
.m0#{$i} .module-title {
//simply add one to the loop index to get the correct list item
background-color: nth($list, $i + 1);
}
}
This compiles to the following CSS
.m00 .module-title {
background-color: green;
}
.m01 .module-title {
background-color: blue;
}
.m02 .module-title {
background-color: orange;
}
.m03 .module-title {
background-color: red;
}
.m04 .module-title {
background-color: yellow;
}
I want to create tool type like maximize or minimize:
{
type: 'my-type-name',
tooltip: 'Make Toolbar Float',
listeners: {
click: function(panel , e , owner , eOpts){}
}
To achive that I already created class in Tool.scss as in theme-base
.#{$prefix}tool-tool-type-my-type-name{
#include icon($tool-my-type-name-icon);
}
But icon is private mixin and in Tool.scss not visible.
After that I created own declaration of that class:
.#{$prefix}tool-tool-type-my-type-name{
content: $fa-var-external-link;
font-family: $font-icon-font-family;
font-size: $tool-glyph-font-size;
color: red;
width:$tool-glyph-font-size;
height:$tool-glyph-font-size;
}
That didn't help.
in var/...Tool.scss
// custom icons:
$tool-my-type-name-glyph: dynamic($fa-var-external-link $tool-glyph-font-size $font-icon-font-family);
in src.../Tools.scss
.#{$prefix}tool-my-type-name {
#if $enable-font-icons and $tool-my-type-name-glyph != null) {
#include font-icon($tool-my-type-name-glyph);
background: none;
} #else {
background-position: 0 ($tool-size * -2);
}
}
Is it possible to darken an array with colors? Like this:
#array: #color1 #color2 #color3 #color4
.color-mix(#i) when (#i > 0) {
.myClass {
li:nth-child(#{i}) {
.background-color(extract(#array, #i));
&:hover {
// THIS IS NOT WORKING, IS THERE A RIGHT APPROACH FOR THIS?
.background-color(extract(darken(#array, 5.5%, #i)));
}
}
.color-mix(#i - 1);
}
}
// Iterate
.color-mix(4);
If I understand your question correctly, yes, you can achieve that. Below is how you do it. Your code was almost correct except that instead of trying to darken the extracted value, it was trying to extract a darkened value (which is not possible).
#array: #fff #00f #ff0 #f00;
.color-mix(#i) when (#i > 0) {
.myClass {
li:nth-child(#{i}) {
.background-color(extract(#array, #i));
&:hover {
.background-color(darken(extract(#array, #i), 5.5%));
}
}
}
.color-mix(#i - 1); /* I have moved it because I think it was wrongly placed */
}
// Iterate
.color-mix(4);
One improvement that I would suggest to your code is to move the :hover selector also within the .background-color mixin like below. This makes it a bit more easier to read as there is no wrapping of a function call within another function and so on.
#array: #fff #00f #ff0 #f00;
.color-mix(#i) when (#i > 0) {
.myClass {
li:nth-child(#{i}) {
.background-color(extract(#array, #i));
}
}
.color-mix(#i - 1);
}
// Iterate
.color-mix(4);
.background-color(#color){
&{
background-color: #color;
&:hover{
background-color: darken(#color, 5.5%);
}
}
}
Even better would be this - just avoid the mixin if you can :)
#array: #fff #00f #ff0 #f00;
.color-mix(#i) when (#i > 0) {
.myClass {
li:nth-child(#{i}) {
#color: extract(#array, #i);
background-color: #color;
&:hover{
background-color: darken(#color, 5.5%);
}
}
}
.color-mix(#i - 1);
}
// Iterate
.color-mix(4);