Sass @for döngüsü - bir renkten başka bir renge dönüşme

Question

Css arka plan renklerinin bir listesini, hedef karanlığa ulaşmak için giderek koyulaştıkça bir liste oluşturmam gerekiyor. Burada belirtilen tekniği kullanmanın mümkün olduğunu biliyorum: ile arasındaki bir rengi başka bir renkle değiştirmek istiyorum. Sadece rengi koyulaştırmak ve koyulaştırmak değil.

Değişken sayıda öğe var ve arka plan renginin beyazdan siyaha geçmesini istiyorum. Temel olarak, bir başlangıç ​​ve bitiş rengi tanımlanmış kademeli bir degrade. Beş ürün olsaydı

.class1 { 
    background-color: #fff; 
} 
.class2 { 
    background-color: #808080; // 50% brightness 
} 
.class3 { 
    background-color: #000; 
} 

böyle görünecektir:: Ben üç öğe olsaydı

Yani çıktısı şu şekilde olmasını isterim

.class1 { 
    background-color: #fff; 
} 
.class2 { 
    background-color: #bfbfbf; // 75% brightness 
} 
.class3 { 
    background-color: #808080; // 50% brightness 
} 
.class4 { 
    background-color: #404040; // 25% brightness 
} 
.class5 { 
    background-color: #000; 
} 

başlangıcı ve Bitiş renkleri her zaman aynı olmalıdır, ancak orta renklerin döngüdeki öğelerin toplamına bağlı olarak otomatik olarak ayarlanması gerekir.

Böyle bir şey Sass ile mümkün olup olmadığını bilmiyorum ??

Answer 1

Burada gereksinim duyduğunuz işlev mix();

$color-1: white; 
$color-2: black; 

$steps: 5; 

@for $i from 0 to $steps { 
    .class-#{$i + 1} { 
     background: mix($color-1, $color-2, percentage($i/($steps - 1))); 
    } 
} 

Çıktı:

.class-1 { 
    background: black; 
} 

.class-2 { 
    background: #3f3f3f; 
} 

.class-3 { 
    background: #7f7f7f; 
} 

.class-4 { 
    background: #bfbfbf; 
} 

.class-5 { 
    background: white; 
} 

http://sassmeister.com/gist/d0fc452765908aac2617

onları ters sırada misiniz? Sadece renkleri değiştir.