Usa il selettore come valore per una variabile in SASS

Question

Vorrei prendere l'ID di un div a cui sto applicando lo stile e impostare una variabile per avere quell'ID come valore. È qualcosa che Sass può fare? Quindi il selettore #eleven imposterà il valore di una variabile su "undici".

Ecco il codice corrente. In primo luogo un'intermedia che sto usando:

@mixin left-icon ($bgcolor, $bgurl, $iconmargin) { 
    background: $bgcolor url(images/#{$bgurl}.png) no-repeat left 5px center; 
    & h2, & p {margin-left: $iconmargin;} 
} 

E questo è quando chiamo il mixin:

#eleven { 
    @include left-icon(#de4c3f,eleven,$defaulticonmargin); 
} 

Così, quando ho usato che mixin c'è un colore di sfondo, parte di un nome di file, e un valore per i margini (che vengono aggiunti ad alcuni selettori figlio) impostati. Come puoi vedere la variabile $bgurl corrisponde al nome del selettore. Fondamentalmente voglio automatizzarlo in modo che lo $bgurl sia impostato sulla stringa di testo dall'ID (con il simbolo cancellato).

La ragione è che avrò dozzine di scatole con lo stesso schema di base ma un'immagine di sfondo unica e sembra, nella mia testa, la cosa più semplice da fare sarebbe salvare ciascun PNG usando il nome dell'ID come il nome del file e poi lasciare che Sass li abbini. Potrei semplicemente fare come ho fatto qui e mettere il valore in longhand ma sembra che qualcosa di simile potrebbe fare Sass, preferirei spendere tempo per farlo bene e imparare di più su Sass che fare un mezzo lavoro.

Spero che abbia senso e non sia una domanda ridicolmente stupida - Ammetto (e non sarete sorpreso di sentire) che sono una recluta molto grezza di Sass ma immagino di poter imparare da questa domanda.

Answer 1

provare qualcosa di simile:

@mixin left-icon ($bgcolor, $bgurl, $iconmargin) { 
    ##{$bgurl} { 
    background: $bgcolor url(images/#{$bgurl}.png) no-repeat left 5px center; 
& h2, & p {margin-left: $iconmargin;} 
    } 
} 

@include left-icon(#de4c3f,eleven,10px); 

In sostanza, è possibile aggiungere le variabili ovunque utilizzando del Sass interpolation syntax

Answer 2

Che cosa si potrebbe fare, invece di renderlo più semplice è ID di uso o classi denominate b11 (o bg11, le lettere sono arbitrarie)

$colorArray = [ #de4c3f, ... ]; 
@for $i from $min through $max { 
    .b#{$i} { 
     @include left-icon(colorArray[$i], $i, $defaulticonmargin); 
    } 
} 

e poi cambiare i nomi di fondo in base al nuovo formato, come in images/#11.pngo è possibile utilizzare this process per convertire la stringa in un int

In questo modo è possibile definire tutti gli elementi in modo ricorsivo!