Variables 在Sass中动态创建或引用变量

我试图在变量上使用字符串插值来引用另一个变量：

//设置变量和混合
$foobaz:20px；
@混音做这个（$bar）{
宽度：$foo-#{$bar}；
}
//通过将'baz'字符串作为参数传递给mixin中的Use$foo baz变量来使用mixin
@包括这样做（“baz”）；

但当我这样做时，我会得到以下错误：

未定义变量：“$foo-”

---

Sass支持PHP风格的变量吗？

每当我需要使用条件值时，我都依赖函数。这里有一个简单的例子

$foo: 2em;
$bar: 1.5em;

@function foo-or-bar($value) {
  @if $value == "foo" {
    @return $foo;
  }
  @else {
    @return $bar;
  }
}

@mixin do-this($thing) {
  width: foo-or-bar($thing);
}

---

Sass不允许动态创建或访问变量。但是，您可以使用列表进行类似的行为

scss：

生成的css：

#smth {
  width: 30px; 
}

---

由于您将添加/连接另一个在运行SASS命令时需要解析一次的变量，因此目前在SASS中无法生成动态变量

一旦命令运行，它将抛出一个无效CSS错误，因为所有声明的变量都将遵循该命令

一旦运行，就不能动态地再次声明变量

为了知道我已经理解了这一点，请说明以下内容是否正确：

您希望在下一部分（word）是动态的位置声明变量

差不多

$list:100 200 300；
@每个$n在$list中{
$font-$n：普通$n 12px/1 Arial；
}
//结果应该是
$font-100：标准100 12px/1 Arial；
$font-200：普通200 12px/1 Arial；
$font-300：普通300 12px/1 Arial；
//因此，我们可以在需要时按如下方式使用它
.span{
字体：$font-200；
p{
字体：$font-100
}
}

---

如果这是您想要的，恐怕到目前为止，这是不允许的

如果您正在使用rails，或者在其他情况下，这里有另一个选项

如果将.erb添加到文件扩展名的末尾，Rails将在将文件发送到SASS解释器之前处理文件的erb。这给了你一个在Ruby中做你想做的事情的机会

例如：（文件：foo.css.scss.erb）

粗略地说，这会导致以下css：

#target {
  width: 20px;
}

---

这实际上可以使用SASS映射而不是变量来实现。下面是一个简单的例子：

动态引用：

$colors: (
  blue: #007dc6,
  blue-hover: #3da1e0
);

@mixin colorSet($colorName) {
    color: map-get($colors, $colorName);
    &:hover {
        color: map-get($colors, $colorName#{-hover});
    }
}
a {
    @include colorSet(blue);
}

@function addColorSet($colorName, $colorValue, $colorHoverValue: null) {
  $colorHoverValue: if($colorHoverValue == null, darken( $colorValue, 10% ), $colorHoverValue);

  $colors: map-merge($colors, (
    $colorName: $colorValue,
    $colorName#{-hover}: $colorHoverValue
  ));

  @return $colors;
}

@each $color in blue, red {
  @if not map-has-key($colors, $color) {
    $colors: addColorSet($color, $color);
  }
  a {
    &.#{$color} { @include colorSet($color); }
  }
}

产出如下：

a { color:#007dc6 }
a:hover { color:#3da1e0 }

a.blue { color: #007dc6; }
a.blue:hover { color: #3da1e0; }
a.red { color: red; }
a.red:hover { color: #cc0000; }

---

动态创建：

$colors: (
  blue: #007dc6,
  blue-hover: #3da1e0
);

@mixin colorSet($colorName) {
    color: map-get($colors, $colorName);
    &:hover {
        color: map-get($colors, $colorName#{-hover});
    }
}
a {
    @include colorSet(blue);
}

@function addColorSet($colorName, $colorValue, $colorHoverValue: null) {
  $colorHoverValue: if($colorHoverValue == null, darken( $colorValue, 10% ), $colorHoverValue);

  $colors: map-merge($colors, (
    $colorName: $colorValue,
    $colorName#{-hover}: $colorHoverValue
  ));

  @return $colors;
}

@each $color in blue, red {
  @if not map-has-key($colors, $color) {
    $colors: addColorSet($color, $color);
  }
  a {
    &.#{$color} { @include colorSet($color); }
  }
}

产出如下：

a { color:#007dc6 }
a:hover { color:#3da1e0 }

a.blue { color: #007dc6; }
a.blue:hover { color: #3da1e0; }
a.red { color: red; }
a.red:hover { color: #cc0000; }

---

我最近发现需要动态地参考一种颜色

我为每个项目都有一个_colors.scss文件，其中我定义了所有颜色，并将它们作为变量引用

在我的_forms.scss文件中，我想为每种可用颜色设置按钮样式。通常是一项乏味的任务。这帮助我避免了为每种不同的颜色编写相同的代码

唯一的缺点是，在编写实际的css之前，必须列出每个颜色名称和值

// $red, $blue - variables defined in _colours.scss
$colours: 
  'red' $red,
  'blue' $blue;

@each $name, $colour in $colours {
  .button.has-#{$name}-background-color:hover {
    background-color: lighten($colour, 15%);
  }
}

---

不幸的是，这不起作用：错误scss/components.scss（第71行“$font-”：预期“：”后的CSS无效，是“$n:normal$n1…”）@castus，oops！对不起，我不清楚-我不是在给出解决方案，而是在再次解释这个问题。我不应该发布一个不允许的解决方案！我认为这会起作用，但似乎我们无法通过sass创建变量？@castus这是如何解决您的问题的？我遇到了一个非常类似的问题，我需要从列表中获取一个字符串值，并向其中添加一个$，然后将其用作变量。我想这正是我要寻找的。这实质上是获取传递给mixin的值并通过函数运行它。然后，根据一系列if语句，返回与变量相同的字符串值。有可能用无限多的值来实现这一点吗？假设我们有一个包含许多字符串的列表，而不仅仅是foo或bar。这纯粹是一种不好的做法，你不想以一连串的if条件结束。将SASS映射与键值对一起使用，并从中提取值。在这个展示中它主要是多余的-为什么不调用just

@include do this（$foo）。。。然而，如果函数确实做了一些事情，但它只是传递……请注意，这仍然不是“动态变量”。这只是我们一直以来使用的列表列表的一个变体。它实际上扩展了列表，列表只接受一个索引号作为指定变量。它允许使用动态生成的名称调用变量，该名称是通过连接传递的字符串创建的，这是请求的功能。这应该是可接受的答案。虽然不是完全动态的，但它最好地模仿了所请求的功能。虽然很有用，但这个示例根本没有创建任何变量。尽管有op问题的标题，但它的文本并没有描述变量的创建，所以我没有提到这一点。然而，只是添加了一个与此相关的部分（尽管仍然使用映射，而不是奇异变量）。