Weil ich es teilweise selber immer wieder nachsuchen muss - nachfolgend die vier Kontrolldirektiven von SASS. Die Grundzüge sollten den meisten bekannt sein, hier geht es eher um die allgemeine Syntax und Eigenheiten in der Syntax.
@if
Eine einfache if/else Anweisung. Eigentlich selbsterklärend, trotzdem; Wenn $is-rem true ist wird der erste Block ausgeführt, wenn nicht dann Block Zwei.
@if $is-rem {
font-size: ($sizeValue * 10) + px;
font-size: $sizeValue + rem;
}@else{
font-size: $sizeValue + em;
}@for
Die For-Schleife in SASS. Etwas anders als die Bekannte for(i = 0, i<3, i++) Schreibweise. In diesem Fall wird die Schleife 3 mal ausgeführt und beginnt bei 1. Die $i Variable wird jedesmal um eine Stelle erhöht.
@for $i from 1 through 3 {
.span-#{$i} { width: 2em * $i; }
}Output:
.span-1{ width: 2em; }
.span-2{ width: 4em; }
.span-3{ width: 6em; } @each
Das @each-Direktiv arbeitet eine definierte Liste ab, in diesem Fall diverse GUI Elemente. Hierbei steht $ui für die Variable, die auch als dateiname verwendet wird.
@each $ui in edit, save, check, logout {
.#{$ui}-icon {
background-image: url('/images/icon-#{$ui}.png');
}
}Output:
.edit-icon{ background-image: url('/images/icon-edit.png'); }
.edit-save{ background-image: url('/images/icon-save.png'); }
.edit-check{ background-image: url('/images/icon-check.png'); }
.edit-logout{ background-image: url('/images/icon-logout.png'); }@while
Mit While wird ein Element solange wiederholt, bis eine Bedingung wahr ist. Hier wird ein Grid mit 12 Spalten erstellt.
$grid: 12;
@while $grid > 0 {
.col-#{$grid} { width: 2em * $grid; }
$grid: $grid - 1;
}Output:
.col-12{ width: 24em; }
.col-11{ width: 22em; }
.col-10{ width: 20em; }
....
.col-1{ width: 2em; }Auch wenn dieser Beitrag etwas knapp war, ich hoffe der eine oder andere kann hier etwas mitnehmen. Unklarheiten, Anmerkungen und Feedback gerne in die Kommentare.