루프에서 vars 목록을 만드는 방법은 무엇입니까?

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

이것은 색상 (이름, 진수, RGB) 걸릴 것 믹스 인이다, .1 - 1의 알파 값을 .1 씩 증가시켜 RGBA의 색상 선언 이름을 만듭니다 (처음 이름을 지정합니다).

출력은 위의 것 :

.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