Freecodecamp: рд╕реИрд╕ рдЪреИрд▓реЗрдВрдЬ: рдХрд┐рд╕реА рд╕реВрдЪреА рдореЗрдВ рдЖрдЗрдЯрдо рдкрд░ рдореИрдк рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП @each рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░реЗрдВ

рдХреЛ рдирд┐рд░реНрдорд┐рдд 14 рдорд╛рд░реНрдЪ 2018  ┬╖  3рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ  ┬╖  рд╕реНрд░реЛрдд: freeCodeCamp/freeCodeCamp



рдЪреБрдиреМрддреА рдХрд╛ рдирд╛рдо

рдХрд┐рд╕реА рд╕реВрдЪреА рдореЗрдВ рдЖрдЗрдЯрдо рдкрд░ рдореИрдк рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП @each рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░реЗрдВ

https://beta.freecodecamp.org/hi/challenges/sass/use-each-to-map-over-items-in-a-list

рдореБрджреНрджреЗ рдХрд╛ рд╡рд┐рд╡рд░рдг


рдореЗрд░рд╛ рдХреЛрдб рд╕реНрдкрд╖реНрдЯ рд░реВрдк рд╕реЗ рдХрд╛рдо рдХрд░рддрд╛ рд╣реИ рдФрд░ рдкреВрд░реНрд╡рд╛рд╡рд▓реЛрдХрди рдЕрдиреБрднрд╛рдЧ рдореЗрдВ рд╕рд╣реА рдкрд░рд┐рдгрд╛рдо рдкреНрд░рджрд╛рди рдХрд░рддрд╛ рд╣реИ рд▓реЗрдХрд┐рди рдХрд┐рд╕реА рдХрд╛рд░рдг рд╕реЗ рдореИрдВ рдирд╣реАрдВ рдХрд░рддрд╛
рд╕рдордЭреЗрдВ рдХрд┐ рдореИрдВ рдЪреБрдиреМрддреА рдкрд╛рд╕ рдирд╣реАрдВ рдХрд░рддрд╛ред

рдмреНрд░рд╛рдЙрдЬрд╝рд░ рдЬрд╛рдирдХрд╛рд░реА

  • рдмреНрд░рд╛рдЙрдЬрд╝рд░ рдХрд╛ рдирд╛рдо, рд╕рдВрд╕реНрдХрд░рдг: рдХреНрд░реЛрдо 64.0.3282.186
  • рдСрдкрд░реЗрдЯрд┐рдВрдЧ рд╕рд┐рд╕реНрдЯрдо: рд╡рд┐рдВрдбреЛрдЬ 7
  • рдореЛрдмрд╛рдЗрд▓, рдбреЗрд╕реНрдХрдЯреЙрдк рдпрд╛ рдЯреИрдмрд▓реЗрдЯ:

рддреБрдореНрд╣рд╛рд░рд╛ рдХреЛрдб

<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>

рд╕реНрдХреНрд░реАрдирд╢реЙрдЯ


screenshot-2

рд╕рдмрд╕реЗ рдЙрдкрдпреЛрдЧреА рдЯрд┐рдкреНрдкрдгреА

рд╕реНрд░реЛрдд рдореЗрдВ рджреЗрдЦрдиреЗ рдкрд░ рдРрд╕рд╛ рдкреНрд░рддреАрдд рд╣реЛрддрд╛ рд╣реИ рдХрд┐ рдкрд░реАрдХреНрд╖рдг рдореЗрдВ рд╡рд░реНрдЧ рдЪрдпрдирдХрд░реНрддрд╛рдУрдВ рдХреЗ рд▓рд┐рдП рдЖрд╡рд╢реНрдпрдХ . рд╣реИ
рдиреАрдЪреЗ рдЬрд╝реЛрд░ рдЙрдкрдпреЛрдЧ рдХрд░ рд░рд╣рд╛ рд╣реИ рджреЗрдЦреЗрдВ blue-bg рдФрд░ рд╣реЛрдирд╛ рдЪрд╛рд╣рд┐рдП .blue-bg
"assert($('blue-bg').css('background-color') == 'rgb(0, 0, 255)', 'message: рдЖрдкрдХреА .blue-bg рдХрдХреНрд╖рд╛ рдореЗрдВ background-color рд╣реЛрдирд╛ рдЪрд╛рд╣рд┐рдП

рдпрд╣ рд▓рд╛рдЗрди рейрезрео-рейреиреж of lines рд╣реИ
рдлреНрд░реАрдХреЛрдбрдХреИрдВрдк/рдмреАрдЬ/рдЪреБрдиреМрддрд┐рдпрд╛рдВ/03-рдлреНрд░рдВрдЯ-рдПрдВрдб-рд▓рд╛рдЗрдмреНрд░реЗрд░реА/рдПрд╕рдПрдПрд╕.

рд╕рднреА 3 рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ

рд╕реНрд░реЛрдд рдореЗрдВ рджреЗрдЦрдиреЗ рдкрд░ рдРрд╕рд╛ рдкреНрд░рддреАрдд рд╣реЛрддрд╛ рд╣реИ рдХрд┐ рдкрд░реАрдХреНрд╖рдг рдореЗрдВ рд╡рд░реНрдЧ рдЪрдпрдирдХрд░реНрддрд╛рдУрдВ рдХреЗ рд▓рд┐рдП рдЖрд╡рд╢реНрдпрдХ . рд╣реИ
рдиреАрдЪреЗ рдЬрд╝реЛрд░ рдЙрдкрдпреЛрдЧ рдХрд░ рд░рд╣рд╛ рд╣реИ рджреЗрдЦреЗрдВ blue-bg рдФрд░ рд╣реЛрдирд╛ рдЪрд╛рд╣рд┐рдП .blue-bg
"assert($('blue-bg').css('background-color') == 'rgb(0, 0, 255)', 'message: рдЖрдкрдХреА .blue-bg рдХрдХреНрд╖рд╛ рдореЗрдВ background-color рд╣реЛрдирд╛ рдЪрд╛рд╣рд┐рдП

рдпрд╣ рд▓рд╛рдЗрди рейрезрео-рейреиреж of lines рд╣реИ
рдлреНрд░реАрдХреЛрдбрдХреИрдВрдк/рдмреАрдЬ/рдЪреБрдиреМрддрд┐рдпрд╛рдВ/03-рдлреНрд░рдВрдЯ-рдПрдВрдб-рд▓рд╛рдЗрдмреНрд░реЗрд░реА/рдПрд╕рдПрдПрд╕.

рдХреНрдпрд╛ рдЖрдк рдЬрд╛рдирддреЗ рд╣реИрдВ рдХрд┐ рдХреЛрдИ рдЗрд╕ рдореБрджреНрджреЗ рдХреЛ рдареАрдХ рдХрд░рдиреЗ рдЬрд╛ рд░рд╣рд╛ рд╣реИ?

@ sjames1958gm рд╡рд╣рд╛рдБ рдЕрдЪреНрдЫрд╛ рдХреИрдЪ! рдХреНрдпрд╛ рдЖрдк рдкрд░реАрдХреНрд╖рдгреЛрдВ рдХреЛ рдареАрдХ рдХрд░рдиреЗ рдореЗрдВ рд░реБрдЪрд┐ рд░рдЦрддреЗ рд╣реИрдВ?
рдпрд╣рд╛рдВ рд╡рд╣ рдпреЛрдЧрджрд╛рди рдорд╛рд░реНрдЧрджрд░реНрд╢рд┐рдХрд╛ рд╣реИ рдЬрд┐рд╕рдХрд╛ рдЖрдкрдХреЛ рд╕рдВрджрд░реНрдн рд▓реЗрдирд╛ рдЪрд╛рд╣рд┐рдП рдФрд░ рдпрджрд┐ рдЖрдкрдХреЛ рд╕рд╣рд╛рдпрддрд╛ рдХреА рдЖрд╡рд╢реНрдпрдХрддрд╛ рд╣реИ рддреЛ рдпреЛрдЧрджрд╛рдирдХрд░реНрддрд╛ рдЪреИрдЯ рд░реВрдо рд╣реИ ред

рдХреНрдпрд╛ рдпрд╣ рдкреГрд╖реНрда рдЙрдкрдпреЛрдЧреА рдерд╛?
0 / 5 - 0 рд░реЗрдЯрд┐рдВрдЧреНрд╕

рд╕рдВрдмрдВрдзрд┐рдд рдореБрджреНрджреЛрдВ

robwelan picture robwelan  ┬╖  3рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ

MichaelLeeHobbs picture MichaelLeeHobbs  ┬╖  3рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ

MelissaManning picture MelissaManning  ┬╖  3рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ

bagrounds picture bagrounds  ┬╖  3рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ

ROWn1ne picture ROWn1ne  ┬╖  3рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ