SCSS/SASS: Wie man eine Liste von Klassen mit Kommas dynamisch erzeugt, die sie trennen

Question

Ich arbeite mit der SCSS Syntax von SASS, um ein dynamisches Rastersystem zu schaffen, aber ich habe einen Haken gefunden.

Ich versuche, die Grid-System vollständig dynamisch so zu machen:

$columns: 12; 

dann schaffe ich die Spalten wie folgt aus:

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

Welche Ausgänge:

.col-1 { 
    width: 4.16667%; 
    } 

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

Dies funktioniert gut, aber was ich als nächstes tun möchte, ist dynamisch generieren eine lange li st der Spalte durch Komma basierend auf der Anzahl von Spalten getrennt Klassen $ gewählt - zB ich möchte es wie folgt aussehen:

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

Ich habe müde dies:

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

aber die Ausgabe ist Dies ist:

Ich bin ein wenig fest auf der Logik hier sowie die SCSS-Syntax erforderlich, um etwas wie das zu erstellen.

Hat jemand irgendwelche Ideen?

Dank

Answer 1

Ich glaube, Sie vielleicht einen Blick auf @extend nehmen wollen. Wenn Sie, dass bis so etwas wie ein:

.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:

$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; 

Es sollte wie in Ihrem CSS-Datei machen.

Hoffe, das hilft!

Answer 2

Es gibt auch einen Weg zu tun, wonach Ihre Frage spezifisch fragt: erzeugen (und verwenden) eine Liste von Klassen mit Kommas, die sie trennen. D.Alexanders Antwort funktioniert völlig in Ihrer Situation, aber ich poste diese Alternative für den Fall, dass es einen anderen Anwendungsfall für jemanden gibt, der diese Frage betrachtet.

Hier ist ein Stift Demonstrieren: http://codepen.io/davidtheclark/pen/cvrxq

Grundsätzlich können Sie Sass functions verwenden, um zu erreichen, was Sie wollen. Insbesondere verwende ich append, um Klassen zu meiner Liste hinzuzufügen, die durch Kommas getrennt sind, und unquote, um Kompilierungskonflikte mit dem Punkt in den Klassennamen zu vermeiden.

Also meine mixin endet wie folgt aussehen:

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

Hoffnung, dass jemand hilft.

Answer 3

thnx hier @davidtheclark ist eine generische Version:

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

es wie folgt verwendet:

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

Das Ergebnis sieht wie folgt aus:

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

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

... 

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

.width10 { 
    width: 10%; } 

.width20 { 
    width: 20%; } 

... 

.width100 { 
    width: 100%; }