# Множественные значения в директиве @each в SASS

Директиву `@each` можно применять для составления более сложных списков стилей. Для этого прописываем несколько переменных, а в списке элементов добавляем дополнительные значения.

Рассмотрим следующий пример:

`@each $picture, $color, $padding in (winter, blue, 10px), (spring, green, 12px), (summer, yellow, 14px), (autumn, brown, 16px) { img.#{$picture} { background-image: url('/images/#{$picture}.png'); border: 4px solid $color; padding: $padding ; } }`

Результат компиляции:

`img .winter { background-image: url("/images/winter.png"); border: 4px solid blue; padding: 10px; } img .spring { background-image: url("/images/spring.png"); border: 4px solid green; padding: 12px; } img .summer { background-image: url("/images/summer.png"); border: 4px solid yellow; padding: 14px; } img .autumn { background-image: url("/images/autumn.png"); border: 4px solid brown; padding: 16px; }`

Так же используя множественное присваивание можно добавлять в список пары значений:

`@each $elem, $font-size in (div: 14px, p: 12px) { #{elem} { font-size: $font-size; } }`

Теперь посмотрим на получившийся результат:

`div { font-size: 14px; } p { font-size: 12px; }`

Расскажите, каким будет результат компиляции следующего кода:

`@each $elem, $size, $color in (navbar: 14px blue, link: 12px red, span: 10px green) { #{$elem} { font-size: $size; color: $color; } }`

Измените условия предыдущей задачи, чтобы у элементов `navbar`, `link` и `span` появилось соответственно нижнее, пунктирное и волнистое подчеркивание текста.

←→
↑