Sass @for loop - da un colore a un altro colore

Question

Ho bisogno di creare un elenco di colori di sfondo css gradualmente diventando più scuri per raggiungere un'oscurità di destinazione. So che è possibile utilizzare la tecnica indicata qui: Sass: Change color with @for loop Ma cosa voglio modulare da un colore a un altro colore. Non solo rendere il colore più scuro e scuro.

Ho un numero variabile di elementi e vorrei che il colore dello sfondo passasse dal bianco al nero. Fondamentalmente un gradiente a gradini con un colore iniziale e finale definito.

Quindi, se ho avuto tre elementi che ho vorrebbe l'uscita di essere qualcosa di simile:

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

Se ho avuto cinque voci sarebbe simile a questa:

.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; 
} 

L'inizio e la i colori finali dovrebbero essere sempre gli stessi, ma i colori intermedi devono essere regolati automaticamente in base al totale degli elementi nel loop.

Non so se qualcosa del genere è possibile anche con Sass ??

Answer 1

La funzione di cui hai bisogno è 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))); 
    } 
} 

uscita:

.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

li vogliono in ordine inverso? Basta scambiare i colori.