3.0 KiB
| id | title | challengeType | forumTopicId | dashedName |
|---|---|---|---|---|
| 587d7dbe367417b2b2512bb9 | Verwende @for, um eine Sass-Schleife zu erstellen | 0 | 301462 | use-for-to-create-a-sass-loop |
--description--
Die @for-Direktive fügt Stile in einer Schleife hinzu, ganz ähnlich wie eine for-Schleife in JavaScript.
@for wird auf zwei Arten verwendet: "start through end" oder "start to end". Der Hauptunterschied ist, dass "start to end" die Endnummer als Teil der Zählung ausschließt und "start trough end" die Endnummer als Teil der Zählung einschließt.
Hier ist ein Beispiel für "start through end":
@for $i from 1 through 12 {
.col-#{$i} { width: 100%/12 * $i; }
}
Der Teil #{$i} ist die Syntax, um eine Variable (i) mit Text zu einem String zu kombinieren. Wenn die Sass-Datei in CSS umgewandelt wird, sieht sie so aus:
.col-1 {
width: 8.33333%;
}
.col-2 {
width: 16.66667%;
}
...
.col-12 {
width: 100%;
}
Dies ist eine leistungsstarke Methode, um ein Rasterlayout (Grid) zu erstellen. Jetzt hast du zwölf Optionen für Spaltenbreiten als CSS-Klassen zur Verfügung.
--instructions--
Schreibe eine @for-Direktive, die eine Variable $j aufnimmt, die von 1 bis (to) 6 geht.
Es sollten 5 Klassen mit den Namen .text-1 bis .text-5 erstellt werden, wobei jede eine Schriftgröße (font-size) von 15px multipliziert mit dem Index hat.
--hints--
Dein Code sollte die @for-Direktive verwenden.
assert(code.match(/@for /g));
Deine Klasse .text-1 sollte eine Schriftgröße (font-size) `von 15px haben.
assert($('.text-1').css('font-size') == '15px');
`
Deine Klasse .text-2 sollte eine Schriftgröße (font-size) `von 30px haben.
assert($('.text-2').css('font-size') == '30px');
`
Deine Klasse .text-3 sollte eine Schriftgröße (font-size) `von 45px haben.
assert($('.text-3').css('font-size') == '45px');
`
Deine Klasse .text-4 sollte eine Schriftgröße (font-size) `von 60px haben.
assert($('.text-4').css('font-size') == '60px');
`
Deine Klasse .text-5 sollte eine Schriftgröße (font-size) `von 75px haben.
assert($('.text-5').css('font-size') == '75px');
`
--seed--
--seed-contents--
<style type='text/scss'>
</style>
<p class="text-1">Hello</p>
<p class="text-2">Hello</p>
<p class="text-3">Hello</p>
<p class="text-4">Hello</p>
<p class="text-5">Hello</p>
--solutions--
<style type='text/scss'>
@for $i from 1 through 5 {
.text-#{$i} { font-size: 15px * $i; }
}
</style>
<p class="text-1">Hello</p>
<p class="text-2">Hello</p>
<p class="text-3">Hello</p>
<p class="text-4">Hello</p>
<p class="text-5">Hello</p>
<style type='text/scss'>
@for $i from 1 to 6 {
.text-#{$i} { font-size: 15px * $i; }
}
</style>
<p class="text-1">Hello</p>
<p class="text-2">Hello</p>
<p class="text-3">Hello</p>
<p class="text-4">Hello</p>
<p class="text-5">Hello</p>