SASS Funktionen mit Variablen

Question

Ich bin ziemlich neu zu SASS-Funktionen und Mixins. Ich würde gerne eine SASS-Funktion machen, die eine Variable für die Basisabstandseinheit multipliziert, basierend auf der Nummer, die im Klassennamen bereitgestellt wird.

Es würde so funktionieren. Nehmen wir an, Sie hätten eine Variable mit dem Namen $ base-spacing-unit mit dem Wert 10. Wenn Sie die Klasse ".pad-top-b5" in ein HTML-Element einfügen, erhält sie eine obere Auffüllung der $ base-spacing-unit x 5.

die Funktion könnte wie folgt aussehen:

<div class="pad-top-b10"></div> 

Und das Element eine obere Polsterung würde:

$base-spacing-unit: 10; 

@function pad-top-b($val) { 
    padding-top: ($base-spacing-unit * $val); 
} 

Auf dem HTML-Element eine Klasse so sagen könnte 100px. Ist das mit SASS überhaupt möglich?

Answer 1

können Sie eine @for Schleife verwenden, die eine Reihe von Klassen erzeugt:

$class-slug: pad-top-b; 
$base-spacing-unit: 10; 
$classes-amount: 10; 

@for $i from 1 through $classes-amount { 
    .#{$class-slug}#{$i} { 
    padding-top: ($base-spacing-unit * $i); 
    } 
} 

Demo auf SassMeister.