ΠΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ @each Π΄Π»Ρ
https://beta.freecodecamp.org/en/challenges/sass/use-each-to-map-over-items-in-a-list
ΠΠΎΠΉ ΠΊΠΎΠ΄ ΡΠ²Π½ΠΎ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ ΠΈ Π΄Π°Π΅Ρ ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΡΠΉ ΡΠ΅Π·ΡΠ»ΡΡΠ°Ρ Π² ΡΠ°Π·Π΄Π΅Π»Π΅ ΠΏΡΠ΅Π΄Π²Π°ΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ³ΠΎ ΠΏΡΠΎΡΠΌΠΎΡΡΠ°, Π½ΠΎ ΠΏΠΎ ΠΊΠ°ΠΊΠΎΠΉ-ΡΠΎ ΠΏΡΠΈΡΠΈΠ½Π΅ Ρ Π½Π΅
ΠΏΠΎΠ½ΠΈΠΌΠ°Ρ, ΡΡΠΎ Ρ Π½Π΅ Π²ΡΠ΄Π΅ΡΠΆΡ ΠΈΡΠΏΡΡΠ°Π½ΠΈΡ.
<style type='text/sass'>
<strong i="27">@each</strong> $color in blue, black, red {
.#{$color}-bg {background-color: $color}
}
div {
height: 200px;
width: 200px;
}
</style>
<div class="blue-bg"></div>
<div class="black-bg"></div>
<div class="red-bg"></div>
ΠΠ»ΡΠ΄Ρ Π² ΠΈΡΡΠΎΡΠ½ΠΈΠΊ, ΠΊΠ°ΠΆΠ΅ΡΡΡ, ΡΡΠΎ Π² ΡΠ΅ΡΡΠ΅ ΠΎΡΡΡΡΡΡΠ²ΡΠ΅Ρ .
Π½Π΅ΠΎΠ±Ρ
ΠΎΠ΄ΠΈΠΌΡΠΉ Π΄Π»Ρ ΡΠ΅Π»Π΅ΠΊΡΠΎΡΠΎΠ² ΠΊΠ»Π°ΡΡΠΎΠ².
Π‘ΠΌ. ΠΠΈΠΆΠ΅, Π² ΡΡΠ²Π΅ΡΠΆΠ΄Π΅Π½ΠΈΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ blue-bg
ΠΈ Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π±ΡΡΡ .blue-bg
"assert ($ ('blue-bg'). css ('background-color') == 'rgb (0, 0, 255)', 'message: Π²Π°Ρ ΠΊΠ»Π°ΡΡ .blue-bg
Π΄ΠΎΠ»ΠΆΠ΅Π½ ΠΈΠΌΠ΅ΡΡ background-color
ΡΠΈΠ½Π΅Π³ΠΎ ΡΠ²Π΅ΡΠ°. '); ",
ΡΡΠΎ ΡΡΡΠΎΠΊΠΈ 318-320 ΠΈΠ·
freeCodeCamp / ΡΠ΅ΠΌΡ / Π·Π°Π΄Π°ΡΠΈ / 03-ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠ½ΡΠ΅ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠΈ / sass.json
ΠΡ Π·Π½Π°Π΅ΡΠ΅, ΡΠΎΠ±ΠΈΡΠ°Π΅ΡΡΡ Π»ΠΈ ΠΊΡΠΎ-Π½ΠΈΠ±ΡΠ΄Ρ ΠΈΡΠΏΡΠ°Π²ΠΈΡΡ ΡΡΡ ΠΏΡΠΎΠ±Π»Π΅ΠΌΡ?
@ sjames1958gm Π₯ΠΎΡΠΎΡΠΈΠΉ ΡΠ»ΠΎΠ²! ΠΡ Π·Π°ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠΎΠ²Π°Π½Ρ Π² ΠΈΡΠΏΡΠ°Π²Π»Π΅Π½ΠΈΠΈ ΡΠ΅ΡΡΠΎΠ²?
ΠΠΎΡ Π ΡΠΊΠΎΠ²ΠΎΠ΄ΡΡΠ²ΠΎ Π΄Π»Ρ ΡΡΠ°ΡΡΠ½ΠΈΠΊΠΎΠ², ΠΊ ΠΊΠΎΡΠΎΡΠΎΠΌΡ Π²Π°ΠΌ ΡΠ»Π΅Π΄ΡΠ΅Ρ ΠΎΠ±ΡΠ°ΡΠΈΡΡΡΡ, ΠΈ ΡΠ°Ρ-ΠΊΠΎΠΌΠ½Π°ΡΠ° ΡΡΠ°ΡΡΠ½ΠΈΠΊΠΎΠ², Π΅ΡΠ»ΠΈ Π²Π°ΠΌ Π½ΡΠΆΠ½Π° ΠΏΠΎΠΌΠΎΡΡ.
Π‘Π°ΠΌΡΠΉ ΠΏΠΎΠ»Π΅Π·Π½ΡΠΉ ΠΊΠΎΠΌΠΌΠ΅Π½ΡΠ°ΡΠΈΠΉ
ΠΠ»ΡΠ΄Ρ Π² ΠΈΡΡΠΎΡΠ½ΠΈΠΊ, ΠΊΠ°ΠΆΠ΅ΡΡΡ, ΡΡΠΎ Π² ΡΠ΅ΡΡΠ΅ ΠΎΡΡΡΡΡΡΠ²ΡΠ΅Ρ
.
Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΡΠΉ Π΄Π»Ρ ΡΠ΅Π»Π΅ΠΊΡΠΎΡΠΎΠ² ΠΊΠ»Π°ΡΡΠΎΠ².Π‘ΠΌ. ΠΠΈΠΆΠ΅, Π² ΡΡΠ²Π΅ΡΠΆΠ΄Π΅Π½ΠΈΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ
blue-bg
ΠΈ Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π±ΡΡΡ.blue-bg
"assert ($ ('blue-bg'). css ('background-color') == 'rgb (0, 0, 255)', 'message: Π²Π°Ρ ΠΊΠ»Π°ΡΡ
.blue-bg
Π΄ΠΎΠ»ΠΆΠ΅Π½ ΠΈΠΌΠ΅ΡΡbackground-color
ΡΠΈΠ½Π΅Π³ΠΎ ΡΠ²Π΅ΡΠ°. '); ",ΡΡΠΎ ΡΡΡΠΎΠΊΠΈ 318-320 ΠΈΠ·
freeCodeCamp / ΡΠ΅ΠΌΡ / Π·Π°Π΄Π°ΡΠΈ / 03-ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠ½ΡΠ΅ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠΈ / sass.json