scss: how to dynamically create variables from array

Question

I have this

        $colors:
            "dark" #3E3E3E,
            "darker" #3E3E3E,
            "light" #ECECF0,
            "green" #00A87B,
            "yellow" #FFBB3B,
            "red" #FF4633,
            "white" #FFFFFF,
            "black" #000000,
            "blue" #436FB6
        ;


        @each $color in $colors{
            // .btn-color
            .btn-#{nth($color, 1)}{
                background: nth($color, 2);
                color: #fff;
            }
            // .color / color
            .#{nth($color, 1)}, #{nth($color, 1)}{
                color: nth($color, 2) !important;
                a{
                    color: nth($color, 2);
                }
            }
            // .color-bg
            .#{nth($color, 1)}-bg {
                background: nth($color, 2);
            }
        }

It dynamically creates various classes. How can I extend this to make variables for each $colors example — i need to use $dark to reach the dark value from $colors

Jakob E · Accepted Answer · 2017-01-31 10:21:42Z

If you are going to automate color variations I recommend you to take a look into the native color functions provided by Sass (http://sass-lang.com/documentation/Sass/Script/Functions.html).

Here is an example based on a color map (IMO simpler to work with compared to list):

$colors:(
  green  : #00A87B,
  yellow : #FFBB3B,
  red    : #FF4633,
  blue   : #436FB6,    
  white  : #FFFFFF,
  black  : #000000
);

@each $name, $color in $colors {
  .color {
    &-#{$name}{ 
      background-color: $color; 
      //  create variations (if not black or white)
      @if $color != white and $color != black {
        &.extra-light { background-color: mix($color, white, 25%); }
        &.light       { background-color: mix($color, white, 50%); }
        &.semi-light  { background-color: mix($color, white, 75%); }
        &.extra-dark  { background-color: mix($color, black, 25%); }
        &.dark        { background-color: mix($color, black, 50%); }
        &.semi-dark   { background-color: mix($color, black, 75%); }            
      } 
    }
  }
}

CSS output

.color-green { background-color: #00A87B;}
.color-green.extra-light { background-color: #bfe9de;}
.color-green.light { background-color: #80d4bd;}
.color-green.semi-light { background-color: #40be9c;}
.color-green.extra-dark { background-color: #002a1f;}
.color-green.dark { background-color: #00543e;}
.color-green.semi-dark { background-color: #007e5c;}

.color-yellow { background-color: #FFBB3B;}
.color-yellow.extra-light { background-color: #ffeece;}
.color-yellow.light { background-color: #ffdd9d;}
.color-yellow.semi-light { background-color: #ffcc6c;}
.color-yellow.extra-dark { background-color: #402f0f;}
.color-yellow.dark { background-color: #805e1e;}
.color-yellow.semi-dark { background-color: #bf8c2c;}

.color-red { background-color: #FF4633;}
.color-red.extra-light { background-color: #ffd1cc;}
.color-red.light { background-color: #ffa399;}
.color-red.semi-light { background-color: #ff7466;}
.color-red.extra-dark { background-color: #40120d;}
.color-red.dark { background-color: #80231a;}
.color-red.semi-dark { background-color: #bf3526;}

.color-blue { background-color: #436FB6;}
.color-blue.extra-light { background-color: #d0dbed;}
.color-blue.light { background-color: #a1b7db;}
.color-blue.semi-light { background-color: #7293c8;}
.color-blue.extra-dark { background-color: #111c2e;}
.color-blue.dark { background-color: #22385b;}
.color-blue.semi-dark { background-color: #325389;}

.color-white { background-color: #FFFFFF;}

.color-black { background-color: #000000;}

Function based approach:

$colors:(
  green  : #00A87B,
  yellow : #FFBB3B,
  red    : #FF4633,
  blue   : #436FB6,    
  white  : #FFFFFF,
  black  : #000000
);


@function get-color($color, $variant: null){
  $color: map-get($colors, $color);
  @return map-get((
    extra-light: mix($color, white, 25%), 
    light:       mix($color, white, 50%), 
    semi-light:  mix($color, white, 75%), 
    semi-dark:   mix($color, black, 75%),        
    dark:        mix($color, black, 50%),         
    extra-dark:  mix($color, black, 25%)
  ),$variant) or $color;
}



.class { color: get-color(green); }
.class { color: get-color(green, semi-light); }
.class { color: get-color(yellow, dark); }

thanks for this... With this can i use the colors as variable also instead of @extend .yellow I want color: $yellow
You can't create dynamic $variable names in Sass – consider using a function instead (example added to the answer above)

Collectives™ on Stack Overflow

scss: how to dynamically create variables from array

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related