Generieren von Variablen aus einer Schleife mit SASS

Question

Ich schreibe eine flexible Sass-Grid-Struktur und ich möchte wissen, ob es möglich ist, Variablen aus einer Schleife in Sass zu generieren.

Zur Zeit habe ich die folgenden, die für eine 12 Stützenraster funktioniert:

$columns: 12; 
$col-width: 100%/$columns; 

$col-1: $col-width; 
$col-2: $col-width*2; 
$col-3: $col-width*3; 
$col-4: $col-width*4; 
$col-5: $col-width*5; 
$col-6: $col-width*6; 
$col-7: $col-width*7; 
$col-8: $col-width*8; 
$col-9: $col-width*9; 
$col-10: $col-width*10; 
$col-11: $col-width*11; 
$col-12: $col-width*12; 

ich dann die Variablen wie so gelten würde:

.sidebar { 
    width: $col-4; 
} 

.main-col { 
    width: $col-8; 
} 

Allerdings, wenn ich 10 Stützenraster wollte ich Ich müsste dies jedes Mal manuell bearbeiten. Keine große Menge an Arbeit, aber wenn ich eine Schleife verwenden könnte, um die Variablen für mich zu generieren, wäre es besser.

Hier ist das ideale Szenario:

$columns: 12; 

@for $i from 1 through $columns { 
    $col-#{$i}: ($i/$columns) * 100%; 
} 

Ich konnte dann zwicken die $columns Variable nach meiner Gitterstruktur. Ich bin mir nicht 100% sicher, dass das mit Sass überhaupt möglich ist. Aber es wäre großartig, wenn es wäre.

einen Kern hier für ein Beispiel siehe: http://www.sassmeister.com/gist/feecef8655dadd54f438e67e6c27dd0c

Jede Hilfe dankbar empfangen würde.

Answer 1

Sie müssen entweder @mixin oder @function verwenden, um Ihr Ziel zu erreichen.

@mixin Beispiel (http://sass-lang.com/documentation/file.SASS_REFERENCE.html#mixins):

$columns: 12; 

@mixin col($num) { 
    width:100%/$columns * $num; 
} 

.sidebar { 
    @include col(4); 
    float: left; 
    background: red; 
} 

.main-col { 
    @include col(8); 
    float: left; 
    background: blue; 
} 

@function Beispiel (http://sass-lang.com/documentation/file.SASS_REFERENCE.html#functions):

$columns: 12;  

@function col($num) { 
    @return 100%/$columns * $num;; 
} 

.sidebar { 
    width: col(4); 
    float: left; 
    background: red; 
} 

.main-col { 
    width: col(8); 
    float: left; 
    background: blue; 
}