css - scss：如何从数组动态创建变量

Question

我有这个

        $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);
            }
        }

它动态创建各种类。我如何扩展它来为每个$colors示例创建变量——我需要使用它$dark来达到dark值$colors

Answer 1

如果您要自动化颜色变化，我建议您查看 Sass 提供的原生颜色函数 ( http://sass-lang.com/documentation/Sass/Script/Functions.html )。

这是一个基于颜色图的示例（与列表相比，IMO 更易于使用）：

$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 输出

.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;}

基于函数的方法：

$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); }