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

Stylus等效命令为push()

names = (adam john wynn mason kuroir)

names = push(names, myname)

请参阅此处http://learnboost.github.com/stylus/docs/bifs.html

Answer 2

尝试使用Stylus，我尝试使用Stylus'.col-01, .col-02, .col-03 { display : block }函数重新创建所有具有相同属性的标准CSS列表，例如（示例1）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

有一种方法可以使用Sylus'@extend重现示例1，虽然它有点hackish

.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

以下是使用Stylus实现此目的的方法：

names = (adam john wynn mason kuroir)

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

编辑：我完全误解了这个问题。我不知道如何添加到列表中，无论是在手写笔中还是在SASS中。

SASS /手写笔 - 动态定义列表

4 个答案: