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

Вот как это сделать с Стилус:

names = (adam john wynn mason kuroir) 

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

EDIT: Я совершенно не понял вопрос. Я не знаю, как добавить в список, в стилусе или в SASS.

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

Экспериментируя с Стилус, я вы пытались переделать, создать стандартный список CSS селекторов, которые все имеют такое же свойство, как (например, 1) .col-01, .col-02, .col-03 { display : block } с помощью 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, используя Sylu с @extend, хотя это немного хаком

.column 
    float left 

sizes = small medium large 

for size, i in sizes 

    for num in (1..12) 

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

Этот способ получения требуемого выходного сигнала.

EDIT:

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

$column 
    float left 

sizes = small medium large 

for size, i in sizes 

    for num in (1..12) 

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