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

$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;
}

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


css sass compass compass-sass
person Edward K.    schedule 28.10.2015    source источник
comment
Какое это имеет отношение к компасу?   -  person    schedule 28.10.2015

Ответы (1)


arrow_upward
1
arrow_downward

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

$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 — это сам список в Sass (хотя и разделенный пробелом), а nth($style, 1) дает вам background, а nth($style, 2) дает вам #333 в первой итерации цикла @each.

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

person Stephan Max    schedule 28.10.2015
comment
Хотя ваш ответ приемлем, этот тип вопроса не соответствует стандартам, которые мы хотели бы иметь здесь, на SO. Здесь неясно, какую часть кода OP не понимает или почему они хотят переписать его, чтобы он был другим, и такой вопрос вряд ли поможет будущим пользователям. - person cimmanon; 28.10.2015
comment
Было бы полезно высказать свое мнение о том, почему кто-то сделал бы это именно так, вместо того, чтобы просто писать CSS обычным способом. - person ; 28.10.2015