Как создать список варов в цикле?

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, который будет принимать цвет (с именем, шестигранный, КЗС), и цикл через создание имени (вы даете ему начальное имя) объявления цвета в 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