Sass变量前缀[重复]答案

【问题标题】：Sass variable prefix [duplicate]Sass变量前缀[重复]
【发布时间】：2014-04-16 14:12:53
【问题描述】：

是否可以使用 SASS 创建类似的东西？

$prefix: *

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

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

【问题讨论】：

你试过了吗，你总是可以使用数组 $prefix('150', etc)
还有：stackoverflow.com/questions/12970413/…

标签： html css sass

【解决方案1】：

在 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

【讨论】：

【解决方案2】：

绝对...

SASS：

$variableName: "myStyle";

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

生成 CSS：

myStyle_r1 {
  border: 1px solid red;
}

关键是插值 - #{$variableName} - 它基本上将变量名在写入时转储出来......

【讨论】：

看起来他想根据另一个变量而不是属性来定义变量。