SASS/Stylus - 动态定义列表答案

【问题标题】：SASS/Stylus - Define a List DynamicallySASS/Stylus - 动态定义列表
【发布时间】：2013-12-03 07:58:39
【问题描述】：

我开始使用 SASS 和 Stylus，但我无法将元素推送到列表中。

例如：

$names: adam john wynn mason kuroir

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

我想将我的名字添加到$names 列表中，而不需要重新指定所有现有的名字。有可能吗？

【问题讨论】：

你是动态生成这个SASS文件吗？在什么情况下您必须重新指定现有名称？
@maxbeatty：我正在编写一个基本（可变列）网格系统，使用for 循环来定义列width，我想移动所有其他共有的属性将列类（如display 和float）转换为逗号分隔的声明（.span1, .span2, ..., .spanN），以节省带宽。
Twitter's Bootstrap 使用.row>[class*="span"]{display:inline;float:left;margin-left:20px;} 实现了这一点。容器.row 的任何直接子后代以及包含span 的类都将被分配这些常见样式。不回答你的问题，但解决了你的问题:)
@maxbeatty：我知道他们是怎么做的，但是 TB 使用 LESS（而且 LESS 不支持循环）。我想一个支持循环的元语言也有某种方式将值连接到一个新的选择器中。

标签： css sass stylus

【解决方案1】：

Stylus 等效命令是push()

names = (adam john wynn mason kuroir)

names = push(names, myname)

请看这里http://learnboost.github.com/stylus/docs/bifs.html

【讨论】：

【解决方案2】：

在使用 Stylus 进行实验时，我尝试使用 Stylus 的 push() 函数重新创建一个标准的 CSS 选择器列表，这些选择器都具有相同的属性，例如（示例 1）.col-01, .col-02, .col-03 { display : block }，如果你尝试这样做，它会中断像这样：

  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

【讨论】：

【解决方案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

【讨论】：

【解决方案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 中添加到列表中。

【讨论】：