Why this doesn't work?
#colors: {
red: #2A3F50;
}
.yyy{
#color: red;
color: #colors[ #color ];
}
Is in Less method to use variables with maps?
The error:
Variable #color not found
PS:
but this code works fine:
#colors: {
red: #2A3F50;
}
.yyy{
#color: red;
color: #colors[ red ];
background-color: #color;
}
If I put ##color in [ ], it throws Variable #red not found
Related
SCSS
$colors: (
primary: red,
secondary: blue,
accent: #ddd,
) !default;
$colors: (
primary: green,
secondary: purple,
black: #000,
white: #fff,
);
#each $color, $value in $colors {
.alert-#{$color} {
color: $value;
}
}
Result
.alert-primary {
color: green;
}
.alert-secondary {
color: purple;
}
.alert-black {
color: #000;
}
.alert-white {
color: #fff;
}
I wanted to create a SASS framework something like bootstrap. Wanted to override theme colors. How can i merge these maps to get something like this? I want a simple solution.
Expected result
.alert-accent {
color: #ddd;
}
.alert-primary {
color: green;
}
.alert-secondary {
color: purple;
}
.alert-black {
color: #000;
}
.alert-white {
color: #fff;
}
You can use map-merge:
$colors: map-merge($colors, (
primary: green,
secondary: purple,
black: #000,
white: #fff
));
From the documentation, this function:
Returns a new map with all the keys and values from both $map1 and $map2.
This can also be used to add a new value or overrwrite a value in $map1, by passing a single key/value pair as $map2.
If both $map1 and $map2 have the same key, $map2’s value takes precedence.
I want to use a SCSS loop as below:
#each $var in dark, purple, green, cyan, silver, white {
.text-#{$var} {
color: nth($color-, $var);
}
.btn-#{$var} {
background-color: nth($color-, $var);
}
}
in order to use the following variables:
$color-dark: #0D0E1E;
$color-purple: #333366;
$color-green: #33cc99;
$color-cyan: #00cccc;
$color-silver: #ccc;
$color-white: #fff;
but it is not working.
$color-#{$var} was not working as well. Can I do this?
nth gets an item in a list. The first argument is the list, the 2nd is an index in the list. Also SASS thinks anything with a $ is a variable, so $color- is a variable. You haven't defined $color- as a variable, and that's not your intended use.
DOCS.
But you can get your desired result with a map...
DEMO
$color-dark: #0D0E1E;
$color-purple: #333366;
$color-green: #33cc99;
$color-cyan: #00cccc;
$color-silver: #ccc;
$color-white: #fff;
$colors: (
dark: $color-dark,
purple: $color-purple,
green: $color-green,
cyan: $color-cyan,
silver: $color-silver,
white: $color-white
);
#each $name, $val in $colors {
.text-#{$name} {
color: $val;
}
.btn-#{$name} {
background-color: $val;
}
}
I am making a web app that is used in three (or more) different contexts, and I want each context to have a different color scheme. However, I don't want to have to maintain three different stylesheets when all that changes is colors, typically.
For instance, suppose the themes are red, blue, and orange. One of my stylesheets describes the link colors:
a {
color: $some_color;
}
I want to split this based on the class applied to the body:
body.style1 {
a {
color: $red;
}
}
body.style2 {
a {
color: $blue;
}
}
body.style3 {
a {
color: $orange;
}
}
You can see how this gets unwieldy pretty quickly if you're changing the style for lots of elements. Is there a way to do this more like this?
a {
&closest:body.style1 {
color: $red
}
&closest:body.style2 {
color: $blue;
}
&closest:body.style3 {
color: $orange;
}
}
This way I can code my scss in a clearer, more maintainable way.
It appers you don't have to have the & first, so this works (at least in 3.2.10):
a {
body.style1 & {
color: $red
}
body.style2 & {
color: $blue;
}
body.style3 &{
color: $orange;
}
}
This is what I prefer. Define a mixin like body-style :
#mixin body-style($style, $map) {
body.#{$style} & {
#each $property, $value in $map {
#{$property}: $value;
}
}
}
Then use this for every tag by passing $style as style class of body and $map as map of css keys and values.
a {
#include body-style(style1, (
color: red,
background: white
)
);
}
It will return :
body.style1 a {
color: red;
background: white;
}
I tried to make the following code look fancier with an #each or a #for loop (without any usable result).
.btn[data-btn-color="black"] {
#include colored-btn($black);
}
.btn[data-btn-color="blue"] {
#include colored-btn($blue);
}
.btn[data-btn-color="red"] {
#include colored-btn($red);
}
// ... and more colors ...
My current approach is to take value from the variable to use it as the value for the data-btn-color attribute and put that snippet into an #each loop.
Something like
#each $color in ($black, $blue) {
#include colored-btn($color);
}
which compiles into:
.btn[data-btn-color="black"] {
background-color: #000; // $black
}
.btn[data-btn-color="blue"] {
background-color: #00f; // $blue
}
Is there any function, which allows me to do such a thing?
You were so close! You don't want the () around what you want to go through in #each. I think Sass would just see what you have as one list item with a two item list inside.
Here is what I think you're trying to do:
$red: #f00;
$blue: #00f;
$black: #000;
$colors: red $red, blue $blue, black $black;
#mixin colored-button($background-color: #000){
background-color: $background-color;
}
#each $color in $colors {
$name: nth($color, 1);
$hex: nth($color, 2);
.btn[data-btn-color="#{$name}"]{
#include colored-button($hex);
}
}
Which would result in:
.btn[data-btn-color="red"] {
background-color: red; }
.btn[data-btn-color="blue"] {
background-color: blue; }
.btn[data-btn-color="black"] {
background-color: black; }
Is there a way to declare the following:
body.someclass { #maincolor:#somecolor;}
bidy.anotherclass { #maincolor:#anothercolor;}
also tried:
body.someclass {.maincolor {color:#somecolor;} }
body.anotherclass {.maincolor {color:#anothercolor;} }
I'm working on a website where each of there mainsections uses a different color... would be extremely helpfull :)
This code should work.
#color: #4D926F;
#color2: #000000;
body.someclass {
color: #color;
}
body.anotherclass {
color: #color2;
}