Question

我有一个主色#abc

我们可以用百分比

创建变暗的颜色

如何用循环创建变暗颜色列表？

@mixin create-color($main) {
  create some vars 
} 

@include create-color(blue);

我会得到

$c-green-1: green
$c-green-2: (green-lighten 10%)
$c-green-3: (green-lighten 20%)

Answer 1

这将完成你所追求的目标：

@mixin alphaColor($name,$color) {
   @for $i from 1 through 10 {
      .c-#{$name}-#{$i} { 
        color: rgba($color,$i/10); 
      }
    }
}

@include alphaColor("blue",blue);
@include alphaColor("red",#ed1414);
@include alphaColor("absurd",rgb(20,237,20));

这是一个mixin，它将采用一种颜色（命名为hex，rgb），并通过它创建一个在RGBA中创建命名（您给它一个初始名称）颜色声明的颜色声明，其中.1 - 1的增量为.1。

以上输出为：

.c-blue-1 { color: rgba(0, 0, 255, 0.1); }
.c-blue-2 { color: rgba(0, 0, 255, 0.2); }
.c-blue-3 { color: rgba(0, 0, 255, 0.3); }
.c-blue-4 { color: rgba(0, 0, 255, 0.4); }
.c-blue-5 { color: rgba(0, 0, 255, 0.5); }
.c-blue-6 { color: rgba(0, 0, 255, 0.6); }
.c-blue-7 { color: rgba(0, 0, 255, 0.7); }
.c-blue-8 { color: rgba(0, 0, 255, 0.8); }
.c-blue-9 { color: rgba(0, 0, 255, 0.9); }
.c-blue-10 { color: blue; }
.c-red-1 { color: rgba(237, 20, 20, 0.1); }
.c-red-2 { color: rgba(237, 20, 20, 0.2); }
.c-red-3 { color: rgba(237, 20, 20, 0.3); }
.c-red-4 { color: rgba(237, 20, 20, 0.4); }
.c-red-5 { color: rgba(237, 20, 20, 0.5); }
.c-red-6 { color: rgba(237, 20, 20, 0.6); }
.c-red-7 { color: rgba(237, 20, 20, 0.7); }
.c-red-8 { color: rgba(237, 20, 20, 0.8); }
.c-red-9 { color: rgba(237, 20, 20, 0.9); }
.c-red-10 { color: #ed1414; }
.c-absurd-1 { color: rgba(20, 237, 20, 0.1); }
.c-absurd-2 { color: rgba(20, 237, 20, 0.2); }
.c-absurd-3 { color: rgba(20, 237, 20, 0.3); }
.c-absurd-4 { color: rgba(20, 237, 20, 0.4); }
.c-absurd-5 { color: rgba(20, 237, 20, 0.5); }
.c-absurd-6 { color: rgba(20, 237, 20, 0.6); }
.c-absurd-7 { color: rgba(20, 237, 20, 0.7); }
.c-absurd-8 { color: rgba(20, 237, 20, 0.8); }
.c-absurd-9 { color: rgba(20, 237, 20, 0.9); }
.c-absurd-10 { color: #14ed14; }

SASSmeister演示：http://www.sassmeister.com/gist/39577ef556de22a9acfe934cbc108a4e

如何在循环中创建变量列表？

1 个答案: