如何在循環中創建變量列表？

，並用百分比

如何創建的顏色變暗名單與循環變暗，我們可以創建顏色？

@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%)

來源

2016-09-22 Liang

SASS編譯成CSS，你不能從一個混合產生變量 – blonfu

你的問題讓我想起了另一個，也就是你的：http://stackoverflow.com/questions/39380955/how-to-generate-multiple-mixins-mixin-lib-with-loop-in-sass。據我所知，有沒有辦法做到這一點 – blonfu

謝謝，blonfu。 :)，那一個也是我的 – Liang

這將完成你以後：

@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）並通過它創建一個名爲（你給它一個初始名稱）的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

來源

2016-09-22 14:28:44

感謝您的幫助，羅伯特。我知道如何做到這一點，我創建的是多個項目的庫。理想情況下，導入此庫不應該生成任何css – Liang

https://www.youtube.com/watch?v=IKFq2cSbQ4Q – Liang

如何在循環中創建變量列表？

回答

相關問題