Is it possible to create a function inside a nested variable with scss/sass?
I was using this article to help guide me but I did not find anything on whether it would work inside a nested color variable.
Article working-with-lists-and-each-loops-in-sass-with-the-index-and-nth-function
I want to create a function to automate the creation of these variables
$oranges: #af5422;
$oranges2: #FFCA28;
$oranges3: #FFA000;
$fish: (
orange: (
"goldfish-1": $oranges,
"goldfish-2": $oranges2,
"goldfish-3": $oranges3,
)
) !default;
h1 {
color: map-get(map-get($fish, orange), "goldfish-1");
}
h2 {
color: map-get(map-get($fish, orange), "goldfish-2");
}
h3 {
color: map-get(map-get($fish, orange), "goldfish-3");
}
codepen
I am looking to do something like this but I can't figure it out.
$oranges: #af5422 #FFCA28 #FFA000;
$fish: (
orange:
#each $current-color in $oranges {
$i: index($oranges, $current-color);
"goldfish-#{$i}": $current-color,
}
)
) !default;
h1 {
color: map-get(map-get($fish, orange), "goldfish-1");
}
h2 {
color: map-get(map-get($fish, orange), "goldfish-2");
}
h3 {
color: map-get(map-get($fish, orange), "goldfish-3");
}
codepen 2
Is it even possible or is there a similar way to execute this?
I don't think it's possible to loop inside a map
However this is how you can achieve what you want easily. I am using the sass syntax
$oranges: #af5422 #FFCA28 #FFA000
$orange: ()
#each $current-colour in $oranges
$i: index($oranges, $current-colour)
$orange: map-merge($orange, ("goldfish-#{$i}": $current-colour))
$fish: (orange: $orange) !default
h1
color: map-get(map-get($fish, orange), "goldfish-1")
h2
color: map-get(map-get($fish, orange), "goldfish-2")
h3
color: map-get(map-get($fish, orange), "goldfish-3")
This is the scss syntax
$oranges: #af5422 #FFCA28 #FFA000;
$orange: ();
#each $current-colour in $oranges {
$i: index($oranges, $current-colour);
$orange: map-merge($orange, ("goldfish-#{$i}": $current-colour));
}
$fish: (orange: $orange) !default;
h1 {
color: map-get(map-get($fish, orange), "goldfish-1");
}
h2 {
color: map-get(map-get($fish, orange), "goldfish-2");
}
h3 {
color: map-get(map-get($fish, orange), "goldfish-3");
}
They both compile to the following css
h1 {
color: #af5422; }
h2 {
color: #FFCA28; }
h3 {
color: #FFA000; }
UPDATED ANSWER FOR EXTENSION
Based on what you want to achieve in the link in your comment
This is the code using sass indented style
$oranges: #af5422 #FFCA28 #FFA000
$newvar: car plane truck
$shaded: 5% 15%
$orange: ()
$vehicle: ()
#each $current-colour in $oranges
$i: index($oranges, $current-colour)
$orange: map-merge($orange, ($i*100:$current-colour))
$fish: ( orange: $orange) !default
#each $automobile in $newvar
$i: index($newvar, $automobile)
#for $count from 1 through 5
$new_map: ()
#if $count == 1
$new_map: map-merge($new_map, ($count *100: lighten(nth($oranges, $i), nth($shaded, 2))))
#else if $count == 2
$new_map: map-merge($new_map, ($count *100: lighten(nth($oranges, $i), nth($shaded, 1))))
#else if $count == 3
$new_map: map-merge($new_map, ($count *100: nth($oranges, $i)))
#else
$new_map: map-merge($new_map, ($count *100: darken(nth($oranges, $i), nth($shaded, 1))))
$vehicle: map-merge($vehicle, $new-map)
$fish: map-merge($fish, ($automobile: $vehicle))
Related
I'm trying to assign different colors to similar items using an SCSS #for loop. Can I append the $i variable used in the #for loop to $color-?
<div>
<h1>Hello</h1>
<h1>World</h1>
<h1>Goodbye</h1>
</div>
$color-1: red;
$color-2: blue;
$color-3: yellow;
#for $i from 1 to 3 {
div>h1:nth-child(#{$i}) {
color: $color-{$i};
}
}
I don't know about dynamic variable names, but the standard way to achieve what you want is SCSS lists, over which you can iterate.
$colors-list: red blue yellow;
#each $current-color in $colors-list {
$i: index($colors-list, $current-color);
div>h1:nth-child(#{$i}) {
color: $current-color;
}
}
which compiles to
div > h1:nth-child(1) {
color: red;
}
div > h1:nth-child(2) {
color: blue;
}
div > h1:nth-child(3) {
color: yellow;
}
I am trying to define global colors, and I wrote a scss compiler to compile all color to its respective class names, But when I try to use them in my html div, the color is not applying to it.
scss snippet:
$blue-1: #001233;
$blue-2: #002132;
$blue-3: #004237;
$blue-4: #003027;
$blue-5: #CCCCCC;
$blue-6: #FFFFFF;
$allcolors:$blue-1 $blue-2 $blue-3 $blue-4 $blue-5 $blue-6;
#each $color in $allcolors {
.color-#{nth($color, 1)} {
color: nth($color, 1);
}
}
I am calling this in my html div as
<div class="color-#CCCCCC">TEST</div>
I don't see my style applied & when I tried compiling it, I can see my css style compiled as shown below
.color-#001233 {
color: #001233;
}
.color-#002132 {
color: #002132;
}
.color-#004237 {
color: #004237;
}
.color-#003027 {
color: #003027;
}
.color-#CCCCCC {
color: #CCCCCC;
}
.color-#FFFFFF {
color: #FFFFFF;
}
any help would be appreciated.
You need to escape the # in your CSS file since it's a special character used for ID selector.
.color-\#CCCCCC {
color: #CCCCCC;
}
<div class="color-#CCCCCC">TEST</div>
you can adjust your SCSS accordingly to add \
$blue-1: #001233;
$blue-2: #002132;
$blue-3: #004237;
$blue-4: #003027;
$blue-5: #CCCCCC;
$blue-6: #FFFFFF;
$allcolors:$blue-1 $blue-2 $blue-3 $blue-4 $blue-5 $blue-6;
#each $color in $allcolors {
.color-#{unquote("\\" + $color)} {
color: $color;
}
}
I have to get values from map to list and then change font-size of h1, h2, h3 using values from list in for loop. My code looks like this:
$font-sizes: (
fs1: 100px,
fs2: 50px,
fs3: 6px
);
$list-of-font-sizes: map-values($font-sizes);
#for $i from 1 through 3 {
h#{$i} {
#each $size in $list-of-font-sizes {
font-size: $size;
}
}
}
It doesn't work and I don't know why. I've tried also like this:
#each $size in $list-of-font-sizes {
#for $i from 1 through 3 {
h#{$i} {
font-size: $size;
}
}
}
You can use #for loop.
Then, you use its index through nth to get each size.
#for $i from 1 through length($list-of-font-sizes) {
h#{$i} {
font-size: nth($list-of-font-sizes, $i);
}
}
I have several SASS color maps for the template:
$map-black: (
$primary-color: black,
$secondary-color: grey
)
$map-white: (
$primary-color: white,
$secondary-color: grey
)
Can I bind specific map on body attribute value or class?
<body data-color="white">
<h1>Title</h1>
</body>
body[data-color="white"] {
#use $map-white;
}
body[data-color="black"] {
#use $map-black;
}
Your syntax is a bit off. You can define two maps this way:
$red: (
primary-color: red,
secondary-color: orange
);
$blue: (
primary-color: blue,
secondary-color: green
);
Then you can access the values in the maps using map-get($map, key):
div[data-color="red"] h1 {
color: map-get($red, primary-color);
}
div[data-color="red"] .desc {
color: map-get($red, secondary-color);
}
div[data-color="blue"] h1 {
color: map-get($blue, primary-color);
}
div[data-color="blue"] .desc {
color: map-get($blue, secondary-color);
}
This will apply to an HTML structure like this:
<div data-color="red">
<h1>Title</h1>
<p class="desc">Description</p>
</div>
<div data-color="blue">
<h1>Title</h1>
<p class="desc">Description</p>
</div>
You can test it in this fiddle
Plain HTML5: not that I know of. But you can write yourself a mixin, which produces this kind of output as simple css-classnames with a for-loop over your maps.
you can test the following on sass-meister (https://www.sassmeister.com/)
$map-black: (
primary-color: '#fff',
secondary-color: '#ccc'
);
$map-white: (
primary-color: '#fff',
secondary-color: '#ccc'
);
$themes: (
white: $map-white,
black: $map-black
);
#each $theme, $colors in $themes {
.#{$theme} {
background: map-get($colors, primary-color);
color: map-get($colors, secondary-color);
}
h1.#{$theme} {
color: map-get($colors, secondary-color);
}
.#{$theme} > p {
color: map-get($colors, secondary-color);
}
}
I've tried to wrap my brain round this, I assume that I need an if statement somewhere along the way.
But I'd like to be able to do this with sass. But this will just take the green colour and ignore the default colour regardless of the class.
SASS
// Default Colours --------------------------------------------------------------
$textColor: #FFF;
.green {
// Base Colours --------------------------------------------------------------
$textColor: green;
}
body {
text: $textColor
}
HTML
<p>jamie</P> //Output is #FFF
<p class="green">jamie</P> //Output is green
Here is a little mixin you could use.
$base-color: green;
#mixin change-var($var: $base_color, $selector: x, $property: color) {
#if $selector == x {
$var: blue;
} #else if $selector == y {
$var: green
} #else {
$var: $var;
}
#{$property}: $var;
}
usage:
.x {
#include change-var($base-color, x, color)
}
.y {
#include change-var($base-color, y, background-color)
}
output:
.x {
color: blue;
}
.y {
background-color: green;
}
Try this
$textColor: #fff;
body {
color: $textColor;
}
.green {
$textColor: green;
color: $textColor;
}