SCSS/SASS: Come generare dinamicamente un elenco di classi con virgole che li separano

Question

Sto lavorando con la sintassi SCSS di SASS per creare un sistema di griglia dinamico ma ho trovato un problema.

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

$columns: 12; 

poi 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 dinamicamente un lungo li st delle classi delle colonne separati da virgole in base al numero di colonne $ scelti - ad esempio, voglio farlo sembrare come questo:

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

ho stanco questo:

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

ma l'uscita è questo:

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

io sono un po 'bloccato sulla logica anche qui, come la sintassi SCSS necessaria per creare qualcosa di simile.

Qualcuno ha qualche idea?

Grazie

Answer 1

penso che si potrebbe voler dare un'occhiata a @extend. Se si imposta che qualcosa di simile:

$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 rendere nel 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 aiuti!

Answer 2

C'è anche un modo per fare ciò che la tua domanda è specificamente chiedendo: generare (e utilizzare) un elenco di classi con virgole che li separano. La risposta di A.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 della penna: http://codepen.io/davidtheclark/pen/cvrxq

In sostanza, è possibile utilizzare Sass functions per ottenere quello che vuoi. Nello specifico, sto usando append per aggiungere classi al mio elenco, separate da virgole, e unquote per evitare conflitti di compilazione con il punto nei nomi di classe.

Quindi il mio mixin finisce per assomigliare a questo:

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

Speranza che aiuta qualcuno.

Answer 3

thnx per @davidtheclark qui è 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 classes 
    } 
} 

usare in questo modo:

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

Il risultato è simile al seguente:

.margin-left5 { 
    margin-left: 5px; } 

.margin-left10 { 
    margin-left: 10px; } 

... 

.margin-left30 { 
    margin-left: 30px; } 

.width10 { 
    width: 10%; } 

.width20 { 
    width: 20%; } 

... 

.width100 { 
    width: 100%; }