SCSS / SASS: So generieren Sie dynamisch eine Liste von Klassen mit Kommas, die diese trennen

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

Ich versuche, das Rastersystem so vollständig dynamisch zu gestalten:

$columns: 12;

dann erstelle ich die Spalten wie folgt:

@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 ich möchte als Nächstes dynamisch eine lange Liste von Spaltenklassen generieren, die durch Kommas getrennt sind, basierend auf der Anzahl der ausgewählten $ Spalten - z. B. möchte ich, dass es so aussieht:

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

Ich habe das müde:

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

aber die Ausgabe ist diese:

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

Ich bin ein wenig mit der Logik und der SCSS-Syntax beschäftigt, die erforderlich ist, um so etwas zu erstellen.

Hat jemand irgendwelche Ideen?

Vielen Dank

Ich denke, Sie möchten vielleicht einen Blick darauf werfen @extend. Wenn Sie das so einrichten wie:

$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 in Ihrer CSS-Datei wie folgt gerendert werden:

.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 den Dokumenten .

Hoffe das hilft!

Es gibt auch eine Möglichkeit, das zu tun, wonach Ihre Frage speziell fragt: eine Liste von Klassen mit Kommas zu erstellen (und zu verwenden).Die Antwort von D.Alexander funktioniert in Ihrer Situation völlig, aber ich poste diese Alternative, falls es einen anderen Anwendungsfall für jemanden gibt, der sich mit dieser Frage befasst.

Hier ist ein Stift, der demonstriert: http://codepen.io/davidtheclark/pen/cvrxq

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

Mein Mixin sieht also so aus:

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

Hoffe das hilft jemandem.

Danke an @davidtheclark hier ist eine allgemeinere 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
    }
}

Verwenden Sie es so:

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

Das Ergebnis sieht folgendermaßen 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%; }