Есть ли другой способ написать это в sass?

Question

$styles: background #333, margin 20px, padding 10px 

.factory 
    @each $style in $styles 
#{nth($style, 1)}: nth($style, 2) 

Есть ли другой способ написать это в sass, что будет означать одно и то же? И может ли кто-нибудь объяснить, что именно делает этот код? Он выводится на следующий css:

.factory { 
    background: #333333; 
    margin: 20px; 
    padding: 10px; 
} 

Я не понимаю, что делает этот код.

Answer 1

Давайте построчно:

$styles: background #333, margin 20px, padding 10px 

Это объявляет глобальную переменную $styles и присваивает ему список пар атрибут-значение.

.factory 

Это создает новый селектор класса .factory.

@each $style in $styles 

Это петля в Sass, пересекая $styles список и по одному назначая каждую запись списка с переменной $style, так что в первой итерации она будет иметь значение background #333, в следующей итерации margin 20px и скоро.

#{nth($style, 1)}: nth($style, 2) 

Эта строка использует интерполяцию строки #{...} и nth функции Sass списков построить атрибут CSS и связанное с ним значение. background #333 - это список в Сассе (хотя и разделенный только пробелами) и nth($style, 1) дает вам background, а nth($style, 2) дает вам #333 на первой итерации цикла @each.

Это дает вам уже ожидаемый результат. Почему вы ищете другой способ достичь этого?