Related
I try to do any less function which will be called to create some classes.
Here is the way I tried :
.makeCssColor{#couleur) {
.coul_#{couleur} {
background-color: fade(~"#{couleur}, 'Fonce'", 15%);
&.open, &:hover {
background-color: ~"#{couleur}, 'Fonce'";
}
.btMod {
background : url('/img/btModEvt_#{couleur}.png') left top no-repeat transparent;
}
}
}
And I try to call it to create the classes :
.makeCssColor("bleu");
.makeCssColor("rouge");
But it generate an error. I don't find the good way to do it... And it bothers me to repeat all these code for each color (there is more than these line code and more thant two colors !).
Can anyone give me a little help ? :)
[edit]
ok, thanks to your help, this code does not generate an error, but there is a mistake in the CSS file :
#marronFonce = #9d5a1e;
.makeCssColor(#couleur) {
.coul_#{couleur} {
.top {
background-color: #couleur, 'Fonce';
}
.mod {
background : url('/img/btModEvt_#{couleur}.png') left top no-repeat transparent;
}
}
}
.makeCssColor(marron);
Generate this into the css file :
.coul_marron .top{background-color:marron,'Fonce'}
.coul_marron background : url('/img/btModEvt_marron.png') left top no-repeat transparent;
So the background color isn't good :
.coul_marron .top{background-color:#9d5a1e}
.coul_marron background : url('/img/btModEvt_marron.png') left top no-repeat transparent;
I need to evaluate #couleur, 'Fonce' : #marronFonce => #9d5a1e.
I tried #{#couleur, 'Fonce'} but it doesn't works...
Fade function takes a colour and a fade percentage, in your case you are passing 2 colours. Pass them one at a time. I also made some adjustments on #couleur since i some cases they don't need to be escaped
.makeCssColor{#couleur) {
.coul_#{couleur} {
background-color: fade(#couleur, 15%), fade(Fonce, 15%);
&.open, &:hover {
background-color: #couleur, 'Fonce';
}
.btMod {
background : url('/img/btModEvt_#couleur.png') left top no-repeat transparent;
}
}
}
when you call the mixin use the below, no need to use quotes
.makeCssColor(bleu);
UPDATE - just pass it in
.makeCssColor(#couleur, #name) {
.coul_#{name} {
.top {
background-color: #couleur;
}
.mod {
background : url('/img/btModEvt_#{name}.png') left top no-repeat transparent;
}
}
}
then when you call it
.makeCssColor(#marronFonce, marron);
OR
other option is you can make a loop, it's more complicated but you can try it. I am using an example I already have on my computer
first define a variable with the colour and names
#sample:
~"0070" '#ebebe7',
~"08x2" '#00247a',
~"01k0" '#92918e';
then loops thru it
.sample-loop ( #l ) when ( #l > 0 ) {
#item: extract( #sample #l );
#code: extract( #item, 1 );
#colour: color(extract( #item, 2 ));
.ext-#{code} {
background-color: #colour;
}
.sample-loop( #l - 1 );
}
and finally call the loop to generate your classes
.sample-loop( 3 );
depending on which version of less you have, the 3 can coded so it is dynamic. If you have older version of less then you have to hard code the length of the variable, or assign the length to a variable so you can use it anywhere
Is it possible to get a variable by name?
I tried building the following function, but it's not working as expected...
#function variable-lookup($variable, $suffix: "") {
$value: null;
#if ($suffix != "" and global-variable-exists($variable+"-"+$suffix)) {
$value: #{$variable+"-"+$suffix};
}
#else if (global-variable-exists($variable)) {
$value: #{$variable};
}
#return $value;
}
Here's an example of how it might be used:
$primary: #000;
$primary-hover: blue;
a {
color: variable-lookup("primary", "base");
&:hover {
color: variable-lookup("primary", "hover");
}
}
The real power would come in when I want to write a bunch of context-specific, shorthand wrapper functions around this "variable-lookup" function.
Any ideas how to achieve this?
Trying to interpolate #{$variable+"-"+$suffix} to give the value primary-base and further trying to get the value of same variable name is not possible. primary-base is already a value and and can't be interpreted as a variable name. That sort of thing could lead to a lot of chaos.
For what you want to accomplish, you are better of using a map and checking for the key in that map
$colours: (
'primary': red,
'primary-base': blue
);
#function variable_lookup($colour, $suffix: '') {
$value: null;
#if ( $suffix != '' and map-has-key($colours, unquote($colour+'-'+$suffix)) ) {
$value: map-get($colours, unquote($colour+'-'+$suffix));
} #else if ( map-has-key($colours, unquote($colour)) ) {
$value: map-get($colours, unquote($colour));
}
#return $value;
}
div {
color: variable-lookup(primary, base);
}
p {
color: variable-lookup(primary);
}
This compiles to the following css
div {
color: blue; }
p {
color: red; }
Your code stored colours as variables but I used those names as keys in maps
This allowed to simulate the checking of variables in your code using the map-has-key method. If that returns true, the key exists and we can get the value which in this case would be the colour using map-get
UPDATED ANSWER
One way to address the issues you raised in your comments would be to define the variables and use them in as values in the map
$primary: #fff;
$warning: yellow;
$colours: ( primary: $primary,
primary-hover: darken($primary, 5%),
secondary: $warning,
secondary-hover: darken($warning, 5%) );
Another way would be to iterate through two lists and map colour to a style
$colours: ();
$list: primary success warning; //map primary to blue, success to green and so on
$shades: blue green yellow;
#for $i from 1 through length($list) {
$key: nth($list, $i);
$value: nth($shades, $i);
$colours: map-merge($colours, ($key: $value));
$colours: map-merge($colours, (unquote($key+'-hover'): darken($value, 5% )) );
}
#debug $colours // (primary: blue, primary-hover: #0000e6, success: green, success-hover: #006700, warning: yellow, warning-hover: #e6e600)
The variable_lookup function remains the same.
Hope this is able to help
I am trying to make a mixin which evaluates both the parameters typ and compare values.
Say I have a mixin to create a CSS3 gradient with fallbacks for older browsers but if no start and/or end color is entered only output the background-color. In addition to checking all colors are being entered correctly I want to make sure that neither the start or end color is equal to the fallback color.
This is how I would like to write it using standard logic but I am not allowed to nest the guards together.
.gradient(#color, #start: 0, #stop: 0) when (iscolor(#color)) and (iscolor(#start)) and (iscolor(#stop)) and not ((#start = #color) and (#stop = #color)) {
background: #color;
background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #start),color-stop(1, #stop));
additional-browser-specific-prefixes;
}
.gradient(#color, #start: 0, #stop: 0) when (default()) {
background-color: #color;
}
Essentially I want to do the following Javascript condition: if(iscolor(color) && iscolor(start) && iscolor(end) && (start !== color && end !== color)). Does anyone have any clue if this is possible?
Any ideas would be greatly appreciated.
Less guards should have the same implementation as CSS #media (this maybe only apply for the syntax??). I can not find examples for the #media, which use the kind of nesting for operators you try to use. So it is not possible for CSS #media and so also not possible for Less guards?
But, on http://mdn.beonex.com/en/CSS/Media_queries.html i found:
The not operator has a very low precedence. For example, the not is
evaluated last in the following query:
#media not all and (-moz-windows-compositor) { ... }
This means that the query is evaluated like this:
#media not (all and (-moz-windows-compositor)) { ... }
... rather than like this:
#media (not all) and (-moz-windows-compositor) { ... }
This should mean that you do not have to wrap in extra parentheses your conditions after the not keyword. The following code should work:
.gradient(#color, #start: 0, #stop: 0) when (iscolor(#color)) and (iscolor(#start) and not #start = #color) and (#stop = #color), but unfortunately this does not works as expected.
If the operator precedence of Less guards have to equal to the operator precedence of the CSS #media, this could be considered as a bug maybe.
update My above assumption was wrong, the not keyword will be applied on the whole media query (or guard) only, so not (a), not (b) make no sense at all. Also see: https://github.com/less/less.js/issues/2149
If all the above is truth, try to revert the conditions:
.gradient(#color, #start: 0, #stop: 0)
when (#start = #color) and (#stop = #color), not (iscolor(#color)), not (iscolor(#start)), not (iscolor(#stop)) {
background-color: #color;
}
.gradient(#color, #start: 0, #stop: 0)
when (#start = #color) and (#stop = #color), (iscolor(#color)=false), (iscolor(#start)=false), (iscolor(#stop)=false) {
background-color: #color;
}
.gradient(#color, #start: 0, #stop: 0) when (default()) {
background: #color;
background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #start),color-stop(1, #stop));
additional-browser-specific-prefixes;
}
or try to use nested mixins as follows:
default(#a,#b,#c){
property: default;
}
.fallback(#a,#b,#c){
property: fallback;
}
.background(#a,#b,#c) when (#a>0) and (#b>0) and (#c>0)
{
.and(#a,#b,#c) when (#a=#c) and (#b=#c) {
.fallback(#a,#b,#a);
}
.and(#a,#b,#c) when (default()){
.default(#a,#b,#a);
}
.and(#a,#b,#c);
}
.background(#a,#b,#c) when (default())
{
.fallback(#a,#b,#c);
}
test0 { .background(0,1,1); }
test1 { .background(1,1,1); }
test2 { .background(2,1,1); }
test3 { .background(1,2,1); }
test4 { .background(1,1,2); }
I am trying to generate a number of classes in a loop based on a number of pre-defined variable snippets.
I have a variables.less document that I am importing at the top of this less file containing my color variables. I then want to generate matching classes for these, but I am unable to get less to compile the variable.
My code:
.loop-class(~"primary", ~"success", ~"info", ~"warning", ~"danger";);
.loop-class(#list, #index: 1) when (isstring(extract(#list, #index))) {
#status: extract(#list, #index);
.button-#{status} {
color: ~'#button-#{status}';
}
.loop-class(#list, (#index + 1));
}
Which compiles to:
.button-primary {
color: #button-primary;
}
.button-success {
color: #button-success;
}
etc etc
As you can see, I get the variable name to concatenate correctly, but I can not get it to resolve, so I'm guessing that LESS has already done it's variable compilation before getting to this function?
I have already tried moving the variables into this document, as well as wrapping the variables in a mixin and adding that inside the .loop-class, but neither of these seemed to help.
I also tried something like:
#status: extract(#list, #index);
#compileClass: ~'#button-#{status}';
.button-#{status} {
color: #compileClass;
}
where I am saving the variable in a another one and then referencing that, but it yields the same result.
I looked at less css calling dynamic variables from a loop and tried implementing that as follows:
.loop-class(~"primary", ~"success", ~"info", ~"warning", ~"danger";);
.define(#var) {
#fallback: ~'#button-#{var}';
}
.loop-class(#list, #index: 1) when (isstring(extract(#list, #index))) {
#status: extract(#list, #index);
.button-#{status} {
.define(#status);
color: ##fallback;
}
.loop-class(#list, (#index + 1));
}
But that gave me the error that ##button-danger (last in the index) is undefined, so it still can't resolve the variable.
Is it obvious to you guys what I'm doing wrong?
Thanks for your help!
Missing Brackets
You are missing a set of needed brackets to resolve the variable:
LESS
//imported from another file
#button-primary: cyan;
#button-success: green;
#button-info: orange;
#button-warning: yellow;
#button-danger: red;
//in your mixin file
.loop-class(~"primary", ~"success", ~"info", ~"warning", ~"danger";);
.loop-class(#list, #index: 1) when (isstring(extract(#list, #index))) {
#status: extract(#list, #index);
.button-#{status} {
color: ~'#{button-#{status}}'; /* two more brackets needed */
| |
here here
}
.loop-class(#list, (#index + 1));
}
CSS Output
.button-primary {
color: #00ffff;
}
.button-success {
color: #008000;
}
.button-info {
color: #ffa500;
}
.button-warning {
color: #ffff00;
}
.button-danger {
color: #ff0000;
}
Cleaner More Friendly Code
Also, as a matter of less cluttered and more user friendly code, you can remove your multiple string interpolations needed for the mixing call by changing isstring to iskeyword in your mixin:
.loop-class(primary, success, info, warning, danger;); /* cleaner code on call */
.loop-class(#list, #index: 1) when (iskeyword(extract(#list, #index))) {
#status: extract(#list, #index);
.button-#{status} {
color: ~'#{button-#{status}}';
}
.loop-class(#list, (#index + 1));
}
This question already has answers here:
Creating or referencing variables dynamically in Sass
(7 answers)
Closed 7 years ago.
Pretty sure this isn't possible with Sass/Scss but want to be certain that this is a limitation of Sass rather than my own misunderstanding of the syntax...
I'm trying to create a list of styles where each list item gets a different color assigned from a bunch of variables:
$color1: #FF0000; // Red
$color2: #FFBF00; // Orange
$color3: #FFFF00; // Yellow
$color4: #7FFF00; // Green
$color5: #007FFF; // Light Blue
$color6: #00FFFF; // Cyan
$color7: #0000FF; // Blue
$color8: #7F00FF; // Purple
$color9: #FF00FF; // Magenta
#for $i from 1 through 9 {
a[href^="link#{$i}"] { color: $color#{$i};
}
}
However, the Sass won't compile. I'm thinking it's just not possible to increment the variable name in this manner. Can anyone confirm?
You can't create variable names in a dynamic way, but you can achieve this with even better semantics and flexibility:
$red : #FF0000;
$orange : #FFBF00;
$yellow : #FFFF00;
$green : #7FFF00;
$lightblue : #007FFF;
$cyan : #00FFFF;
$blue : #0000FF;
$purple : #7F00FF;
$magenta : #FF00FF;
$colors: $red $orange $yellow $green $lightblue $cyan $blue $purple $magenta;
#each $color in $colors {
$i: index($colors, $color);
a[href^="link#{$i}"] { color: $color; }
}
UPDATE: In Sass 3.3, you can use a map for less repetition.
$colors: (
red : #FF0000,
orange : #FFBF00,
yellow : #FFFF00,
green : #7FFF00,
lightblue : #007FFF,
cyan : #00FFFF,
blue : #0000FF,
purple : #7F00FF,
magenta : #FF00FF,
);
#each $name, $color in $colors {
a[href^="link#{$name}"] { color: $color; }
}