1

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

例如：

$names: adam john wynn mason kuroir

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

我想在$names不重新指定所有现有名称的情况下将我的名字添加到列表中。是否可以？

4

4 回答 4

5

手写笔等效命令是push()

names = (adam john wynn mason kuroir)

names = push(names, myname)

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

于 2012-08-13T12:09:18.487 回答
3

尝试使用 Stylus，我尝试.col-01, .col-02, .col-03 { display : block }使用 Stylus 的push()功能重新创建一个标准的 CSS 选择器列表，这些选择器都具有相同的属性，例如（示例 1），如果您尝试执行以下操作，则会中断：

  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' 重现示例 1 @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
于 2013-11-27T19:07:25.280 回答
1

在 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
于 2012-07-09T21:04:48.973 回答
0

以下是使用 Stylus 完成此操作的方法：

names = (adam john wynn mason kuroir)

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

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

于 2012-02-24T12:54:31.710 回答