SASS / Stylus - определить список динамически

Question

Я начал играть с SASS и Stylus, но у меня возникли проблемы с добавлением элементов в список.

Например:

$names: adam john wynn mason kuroir

.photos
  @each $name in $names
    .photo-#{$name}
      background: image-url("avatars/#{$name}.png") no-repeat

Я хочу добавить свое имя в список $names без повторного указания всех существующих имен. Возможно ли это?

Answer 1

Эквивалентная команда стилуса: push()

names = (adam john wynn mason kuroir)

names = push(names, myname)

Смотрите здесь http://learnboost.github.com/stylus/docs/bifs.html

Answer 2

Экспериментируя со Стилусом, я попытался воссоздать стандартный список селекторов CSS, которые имеют одно и то же свойство, как (пример 1) .col-01, .col-02, .col-03 { display : block }, используя функцию Stylus 'push(), которая прерывается, если вы пытаетесь это сделать как то так:

  sizes = small medium large

  for size, i in sizes

     for num in ( 1..12 )

         columns = push( .column-{size}-{num} )

Однако, если вы сделаете что-то подобное вместо этого

  sizes = small medium large

  for size, i in sizes

     for num in ( 1..12 )

        .column-{size}-{num}
            display  block
            float    left

Работает, но скомпилированный CSS многословен

.column-small-1 { display: block; float: left }
.column-small-2 { display: block; float: left }
.column-small-3 { display: block; float: left }
 etc

Есть способ воспроизвести пример 1, используя Sylus '@extend, хотя он немного хакерский

.column
   float  left 

sizes = small medium large

for size, i in sizes

   for num in ( 1..12 )

       .column-{size}-{num}
             @extend .column 

Этот метод производит желаемый результат.

РЕДАКТИРОВАТЬ:

Вы можете разграничить класс, используя $ вместо . нотации - таким образом, исходный класс не создает скомпилированный css

$column
   float  left

sizes = small medium large

for size, i in sizes

   for num in ( 1..12 )

       .column-{size}-{num}
             @extend .column 

Answer 3

В Sass у вас есть append метод:

Примеры:

append(10px 20px, 30px) => 10px 20px 30px
append((blue, red), green) => blue, red, green
append(10px 20px, 30px 40px) => 10px 20px (30px 40px)
append(10px, 20px, comma) => 10px, 20px
append((blue, red), green, space) => blue red green

Answer 4

Вот как это сделать с помощью стилуса:

names = (adam john wynn mason kuroir)

.photos
  for name in names
    .photo-{name}
      background: image-url("avatars/%s.png" % name) no-repeat

РЕДАКТИРОВАТЬ: Я совершенно не понял вопрос. Я не знаю, как добавить в список ни в стилусе, ни в SASS.