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

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

css sass

Css SASS/手写笔-动态定义列表,css,sass,stylus,Css,Sass,Stylus,我开始玩SASS和Stylus，但在将元素推到列表上时遇到了问题例如： $names: adam john wynn mason kuroir .photos @each $name in $names .photo-#{$name} background: image-url("avatars/#{$name}.png") no-repeat 我想将我的姓名添加到$names列表中，而无需重新指定所有现有姓名。有可能吗？以下是如何使用手写笔完成此操作： names

我开始玩SASS和Stylus，但在将元素推到列表上时遇到了问题

例如：

$names: adam john wynn mason kuroir

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

我想将我的姓名添加到

$names

列表中，而无需重新指定所有现有姓名。有可能吗？

以下是如何使用手写笔完成此操作：

names = (adam john wynn mason kuroir)

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

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

以下是如何使用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中，您有以下方法：

示例：

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

在Sass中，您有以下方法：

示例：

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

与手写笔等效的命令是

push（）

请参见此处

手写笔等效命令是

push（）

请参见此处

尝试使用触控笔，我尝试重新创建一个标准的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

有一种方法可以使用Sylus的@extend重现示例1，尽管它有点粗糙

.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

在使用触控笔进行实验时，我尝试使用触控笔的

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，尽管它有点粗糙

.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

是否动态生成此SASS文件？在什么情况下，您必须重新指定现有名称？@maxbeatty:我正在使用

for

循环对基本（可变列）网格系统进行编码，以定义列

宽度

，并且我希望移动所有列类共有的所有其他属性（如

display

和

float

）转换为逗号分隔的声明（

.span1、.span2、.spanN

），以节省带宽。通过

.row>[class*=“span”]{display:inline；float:left；margin left:20px；}

实现这一点。容器

.row

的任何直接子代，以及包含

span

的类，都将被分配这些通用样式。没有回答您的问题，但解决了您的问题：）@maxbeatty：我知道他们是如何做到的，但TB使用更少（并且更少不支持循环）。我想象一种支持循环的元语言也有某种方式将值连接到一个新的选择器中？在什么情况下，您必须重新指定现有名称？@maxbeatty:我正在使用

for