SASS 颜色权重混合答案

【问题标题】：SASS Color Weight MixinSASS 颜色权重混合
【发布时间】：2017-05-05 13:22:21
【问题描述】：

我正在尝试创建一个颜色权重混合。结果将类似于 Google Material 的颜色权重 (https://material.io/guidelines/style/color.html#color-color-palette)。

我希望有一个函数可以传递基色，它会为每个权重变亮/变暗，为每个权重创建变量和类。

采用以下手动完成的权重：

$color-blue: #1483ff;
$color-blue-100: lighten($color-blue, 30%);
$color-blue-200: lighten($color-blue, 20%);
$color-blue-400: lighten($color-blue, 10%);
$color-blue-500: $color-blue;
$color-blue-600: darken($color-blue, 10%);
$color-blue-700: darken($color-blue, 20%);
$color-blue-800: darken($color-blue, 30%);
$color-blue-900: darken($color-blue, 40%);

我正在尝试这样的事情：

$colors: $color-blue-100, $color-blue-200, $color-blue-300;

@for $c from 1 through length($colors)-1 {
  .bg-blue-#{$i} {
    background: $c;
  }
}

但这不起作用，我仍然需要手动定义变量。

【问题讨论】：

标签： sass

【解决方案1】：

我采用了迭代预定义“调色板”的方法，其中权重和百分比对于颜色也是静态的。您接下来要做的就是添加/更改定义的颜色。

$colors : (
 "blue" : #1483ff,
 "green" : #4CAF50,
 "yellow" : #FFEB3B,
);

$palette : (
  100 : 40%,
  200 : 30%,
  300 : 20%,
  400 : 10%,
  500 : 0,
  600 : 10%,
  700 : 20%,
  800 : 30%,
  900 : 40%
);

@each $name, $hex in $colors {
  @each $weight, $percentage in $palette {
    @if $weight < 500 {
      .bg-#{"" + $name}-#{$weight} {
        background-color: lighten($hex, $percentage);
      }
    } @else if $weight > 500 {
      .bg-#{"" + $name}-#{$weight} {
        background-color: darken($hex, $percentage);
      }
    } @else {
      .bg-#{"" + $name}-#{$weight} {
        background-color: $hex;
      }
    }
  }
}

编译成

.bg-blue-100 {
  background-color: #e0efff;
}

.bg-blue-200 {
  background-color: #add4ff;
}

.bg-blue-300 {
  background-color: #7ab9ff;
}

.bg-blue-400 {
  background-color: #479eff;
}

.bg-blue-500 {
  background-color: #1483ff;
}

.bg-blue-600 {
  background-color: #006ae0;
}

.bg-blue-700 {
  background-color: #0052ad;
}

.bg-blue-800 {
  background-color: #003a7a;
}

.bg-blue-900 {
  background-color: #002247;
}

.bg-green-100 {
  background-color: #d9eeda;
}

.bg-green-200 {
  background-color: #b5dfb7;
}

.bg-green-300 {
  background-color: #92cf94;
}

.bg-green-400 {
  background-color: #6ec071;
}

.bg-green-500 {
  background-color: #4CAF50;
}

.bg-green-600 {
  background-color: #3d8b40;
}

.bg-green-700 {
  background-color: #2d682f;
}

.bg-green-800 {
  background-color: #1e441f;
}

.bg-green-900 {
  background-color: #0e210f;
}

.bg-yellow-100 {
  background-color: white;
}

.bg-yellow-200 {
  background-color: #fffbd4;
}

.bg-yellow-300 {
  background-color: #fff5a1;
}

.bg-yellow-400 {
  background-color: #fff06e;
}

.bg-yellow-500 {
  background-color: #FFEB3B;
}

.bg-yellow-600 {
  background-color: #ffe608;
}

.bg-yellow-700 {
  background-color: #d4be00;
}

.bg-yellow-800 {
  background-color: #a19100;
}

.bg-yellow-900 {
  background-color: #6e6300;
}

【讨论】：

:root,@stephen-c 可以用吗？

【解决方案2】：

应该这样做并且没有要定义的变量。您可以在sassmeister 上看到输出。

@mixin color-weight ($class, $base-color, $weight: 4) {
  $bg-color: null;

  @for $i from 1 through 8 {
    @if $i < 4 {
      $weight: $weight - 1;
      $bg-color: lighten($base-color, $weight * 10%);
    } @else if $i == 4 {
      $weight: 0;
      $bg-color: $base-color;
    } @else {
      $weight: $weight + 1;
      $bg-color: darken($base-color, $weight * 10%);
    }

    .#{$class}-#{$i} { background-color: $bg-color; }
  }
}

@include color-weight(bg-blue, #1483ff);
@include color-weight(mad, red);

【讨论】：