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

71

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

css sass styles stylesheet grid-system Josh
quelle
Aus Neugier: "@mixin col-x {@for $ i von 1 bis $ column {.col - # {$ i} {width: $ column-size * $ i;}}}" können Sie erklären, was dieser Code ist genau tun?
Mag
2
@Mag Es durchläuft die Anzahl der Spalten, die ich festgelegt habe, z. B. $ Spalten: 6; und erstellt eine Klasse namens col-1, col-2 usw. Wenn ich also 6 Spalten möchte, wird nur bis col-6 gewechselt. Es gibt dann jeder Spalte eine Breite von (100% geteilt durch die Anzahl der $ Spalten, multipliziert mit ihrer Spaltennummer), z. B. Spalte 3 = (100% / 6) * 3 = 50%.
Josh

Antworten:

111

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!

D. Alexander
quelle
Ich habe heute eine Stunde lang im Internet nach CSS-Klassen für Sass for Loops gesucht, bis ich diese endlich gefunden habe.
Eric Steinborn
Großartig. Ihre Antwort beschreibt auch, wie Sie benutzerdefinierten Code wie erstellen .col-#{$i}-m.
Beytarovski
24

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.

davidtheclark
quelle
Über 6 Jahre später ja! Das hat mir geholfen. Die spezifische Verwendung des Wortes "Komma" löste mein Problem genau. Vielen Dank!
Jeremy Carlson
10

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%; }
b3wii
quelle