ciclo For in SCSS con una combinazione di variabili

Question

Ho un mucchio di elementi: (# CP1, CP2 #, # CP3, # CP4)

che voglio aggiungere un colore di sfondo utilizzando SCSS .

Il mio codice è:

$colour1: rgb(255,255,255); // white 
$colour2: rgb(255,0,0); // red 
$colour3: rgb(135,206,250); // sky blue 
$colour4: rgb(255,255,0); // yellow 

@for $i from 1 through 4 { 
    #cp#{i} { 
     background-color: rgba($(colour#{i}), 0.6); 

     &:hover { 
      background-color: rgba($(colour#{i}), 1); 
      cursor: pointer; 
     } 
    } 
} 

Answer 1

variabili SASS devono ancora essere preceduto da un segno di dollaro all'interno interpolazioni, in modo da ogni luogo avete #{i}, in realtà dovrebbe essere #{$i}. Puoi vedere altri esempi nel riferimento SASS su interpolations.

Answer 2

Invece di generare i nomi delle variabili utilizzando l'interpolazione, è possibile creare un elenco e utilizzare il metodo nth per ottenere i valori. Perché l'interpolazione funzioni, la sintassi deve essere #{$i}, come indicato dalla tramoggia .

$colour1: rgb(255,255,255); // white 
$colour2: rgb(255,0,0); // red 
$colour3: rgb(135,206,250); // sky blue 
$colour4: rgb(255,255,0); // yellow 

$colors: $colour1, $colour2, $colour3, $colour4; 

@for $i from 1 through length($colors) { 
    #cp#{$i} { 
     background-color: rgba(nth($colors, $i), 0.6); 

     &:hover { 
      background-color: rgba(nth($colors, $i), 1); 
      cursor: pointer; 
     } 
    } 
} 

Answer 3

Come @hopper ha detto il problema principale è che non si è prefisso variabili interpolati con il simbolo del dollaro in modo dalla sua risposta deve essere contrassegnata come corretta, ma voglio aggiungere un suggerimento.

Usa @each regola invece di @for anello per questo caso specifico. Le ragioni:

• Non c'è bisogno di conoscere la lunghezza della lista
• Non è necessario utilizzare length() funzione per calcolare la lunghezza della lista
• Non è necessario utilizzare funzione ennesima()
• @each regola è più semantica di @for direttiva

Il codice:

$colours: rgb(255,255,255), // white 
      rgb(255,0,0),  // red 
      rgb(135,206,250), // sky blue 
      rgb(255,255,0); // yellow 

@each $colour in $colours { 
    #cp#{$colour} { 
     background-color: rgba($colour, 0.6); 

     &:hover { 
      background-color: rgba($colour, 1); 
      cursor: pointer; 
     } 
    } 
} 

O se si preferisce è possibile includere ogni $ colore nella direttiva @each invece di dichiarare $ colori variabili:

$colour1: rgb(255,255,255); // white 
$colour2: rgb(255,0,0);  // red 
$colour3: rgb(135,206,250); // sky blue 
$colour4: rgb(255,255,0); // yellow 

@each $colour in $colour1, $colour2, $colour3, $colour4 { 
    #cp#{$colour} { 
     background-color: rgba($colour, 0.6); 

     &:hover { 
      background-color: rgba($colour, 1); 
      cursor: pointer; 
     } 
    } 
} 

Sass Reference for @each directive