SASS/Stylus - Define a List Dynamically

Question

I started playing with SASS and Stylus but I'm having trouble pushing elements onto a list.

For instance:

$names: adam john wynn mason kuroir

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

I want to add my name to the $names list without re-specifying all the existing names. Is it possible?

Answer 1

The Stylus equivalent command is push()

names = (adam john wynn mason kuroir)

names = push(names, myname)

See here http://learnboost.github.com/stylus/docs/bifs.html

Answer 2

Experimenting with Stylus, I've tried to re-create a standard CSS list of selectors that all have the same property like (example 1) .col-01, .col-02, .col-03 { display : block } using Stylus' push() function, which breaks if you try to do something like this:

  sizes = small medium large

  for size, i in sizes

     for num in ( 1..12 )

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

However, if you do something like this instead

  sizes = small medium large

  for size, i in sizes

     for num in ( 1..12 )

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

It works, but the compiled CSS is verbose

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

There is a way to reproduce example 1 using Sylus' @extend, although it is slightly hackish

.column
   float  left 

sizes = small medium large

for size, i in sizes

   for num in ( 1..12 )

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

This method does produce the desired output.

EDIT:

You can demarcate a class using $ instead of . notation — so the original class does not produce any compiled 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

In Sass you have append method:

Examples:

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

Here's how to accomplish this with Stylus:

names = (adam john wynn mason kuroir)

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

EDIT: I totally misunderstood the question. I don't know how to add to the list, in stylus nor in SASS.