SCSS / SASS: come generare dynamicmente un elenco di classi con virgole che le separano

Sto lavorando con la syntax SCSS di SASS per creare un sistema di grid dinamico ma ho avuto un problema.

Sto cercando di rendere il sistema di griglia completamente dinamico come questo:

$columns: 12; 

quindi creo le colonne in questo modo:

 @mixin col-x { @for $i from 1 through $columns { .col-#{$i} { width: $column-size * $i; } } } 

Quali uscite:

 .col-1 { width: 4.16667%; } .col-2 { width: 8.33333%; } etc... 

Funziona bene ma quello che voglio fare successivamente è generare dynamicmente un lungo elenco di classi di colonne separate da virgole in base al numero di colonne $ scelte , ad esempio voglio che assomigli a questo:

     .col-1, .col-2, .col-3, .col-4, etc... { float: left; } 

    Ho stancato questo:

     @mixin col-x-list { @for $i from 1 through $columns - 1 { .col-#{$i}-m { float: left; } } } 

    ma l’output è questo:

     .col-1 { float: left; } .col-2 { float: left; } etc... 

    Sono un po ‘bloccato sulla logica qui così come la syntax SCSS richiesta per creare qualcosa di simile.

    Qualcuno ha qualche idea?

    Grazie

    Penso che potresti voler dare un’occhiata a @extend . Se lo imposti qualcosa come:

     $columns: 12; %float-styles { float: left; } @mixin col-x-list { @for $i from 1 through $columns { .col-#{$i}-m { @extend %float-styles; } } } @include col-x-list; 

    Dovrebbe essere visualizzato nel tuo file css come:

     .col-1-m, .col-2-m, .col-3-m, .col-4-m, .col-5-m, .col-6-m, .col-7-m, .col-8-m, .col-9-m, .col-10-m, .col-11-m, .col-12-m { float: left; } 

    @extend in the docs .

    Spero che questo ti aiuti!

    C’è anche un modo per fare ciò che la tua domanda richiede in particolare: generare (e usare) un elenco di classi con virgole che le separano. La risposta di D.Alexander funziona totalmente nella tua situazione, ma sto pubblicando questa alternativa nel caso in cui ci sia un altro caso d’uso per qualcuno che guarda questa domanda.

    Ecco una dimostrazione di penna: http://codepen.io/davidtheclark/pen/cvrxq

    Fondamentalmente, puoi usare le funzioni di Sass per ottenere quello che vuoi. In particolare, sto usando append per aggiungere classi al mio elenco, separate da virgole e unquote per evitare conflitti di compilazione con il punto nei unquote classi.

    Quindi il mio mixin finisce così:

     @mixin col-x { $col-list: null; @for $i from 1 through $columns { .col-#{$i} { width: $column-size * $i; } $col-list: append($col-list, unquote(".col-#{$i}"), comma); } #{$col-list} { float: left; } } 

    Spero che aiuti qualcuno.

    da thnx a @davidtheclark ecco una versione più generica:

     @mixin attr-x($attr, $attr-count: 10, $attr-steps: 10, $unit: '%') { $attr-list: null; @for $i from 1 through $attr-count { $attr-value: $attr-steps * $i; .#{$attr}#{$attr-value} { #{$attr}: #{$attr-value}#{$unit}; } $attr-list: append($attr-list, unquote(".#{$attr}-#{$attr-value}"), comma); } #{$attr-list} { //append style to all classs } } 

    Usalo in questo modo:

     @include attr-x('margin-left', 6, 5, 'px'); //or @include attr-x('width'); 

    Il risultato è simile a questo:

     .margin-left5 { margin-left: 5px; } .margin-left10 { margin-left: 10px; } ... .margin-left30 { margin-left: 30px; } .width10 { width: 10%; } .width20 { width: 20%; } ... .width100 { width: 100%; }