Question

是否可以使用SASS创建类似的内容？

$prefix: *

*-var1: 150px
*-var2: 150px
*-var3: 350px

这对于组织样式表非常有用

Answer 1

...绝对

SASS：

$variableName: "myStyle";

#{$variableName}_r1{ border: 1px solid red; }

制作CSS：

myStyle_r1 {
  border: 1px solid red;
}

关键是插值 - ＃{$ variableName} - 它基本上在写入时转储了variableName ...

Answer 2

在Sass 3.3中，有一些新功能可能会解决您的需求，并大大有助于组织样式表

现在你有了地图，它允许你基本上创建包含变量的对象。

您可以执行以下操作：

$colors: (
  header: #b06,
  text: #334,
  footer: #666777,
)

.header {
  background-color: map-get($colors, header)
}

除了为css选择器添加前缀的新功能之外：

// Sass:
.button {
  &-primary { background: orange; }
  &-secondary { background: blue; }
}

// Output:
.button-primary { background: orange; }
.button-secondary { background: blue; }

进一步阅读：http://thesassway.com/news/sass-3-3-released

Sass变量前缀

2 个答案: