Question

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

// Set up variable and mixin
$foo-baz: 20px;

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

// Use mixin by passing 'baz' string as a param for use $foo-baz variable in the mixin
@include do-this('baz');

但是当我这样做时，我收到以下错误：

未定义的变量：“$ foo - ”。

Sass是否支持PHP风格的变量？

Answer 1

这实际上可以使用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);
}

输出为：

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

动态创建：

@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.blue { color: #007dc6; }
a.blue:hover { color: #3da1e0; }
a.red { color: red; }
a.red:hover { color: #cc0000; }

Answer 2

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

SCSS：

$list: 20px 30px 40px;    
@mixin get-from-list($index) {
  width: nth($list, $index);
}

$item-number: 2;
#smth {
  @include get-from-list($item-number);
}

生成css：

#smth {
  width: 30px; 
}

Answer 3

任何时候我需要使用条件值，我依靠函数。这是一个简单的例子。

$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);
}

Answer 4

如果你正在使用rails，可能还有其他情况，这是另一种选择。

如果将.erb添加到文件扩展名的末尾，Rails将在将文件发送到SASS解释器之前对文件进行处理。这让你有机会在Ruby中做你想做的事。

例如：（File：foo.css.scss.erb）

// Set up variable and mixin
$foo-baz: 20px; // variable

<%
def do_this(bar)
  "width: $foo-#{bar};"
end
%>

#target {
  <%= do_this('baz') %>
}

以下scss中的结果：

// Set up variable and mixin
$foo-baz: 20px; // variable

#target {
  width: $foo-baz;
}

粗糙的，导致以下css：

#target {
  width: 20px;
}

Answer 5

最近我发现需要动态引用颜色。

对于每个项目，我都有一个_colours.scss文件，在该文件中，我定义了所有颜色一次，并将它们始终作为变量引用。

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

唯一的缺点是您必须在编写实际的CSS之前列出每种颜色的名称和值。

    <table id="MyTable" width="100%" ></table>

Answer 6

到现在为止，在SASS中无法生成动态变量，因为在运行sass命令时，您将添加/连接另一个需要解析的var。

一旦命令运行，就会为无效的CSS引发错误，因为所有声明的变量都将跟随提升。

运行后，您无法再次声明变量

要知道我已理解这一点，请注意以下内容是否正确：

你想声明下一部分（单词）是动态的变量

类似

$list: 100 200 300;

@each $n in $list {
    $font-$n: normal $n 12px/1 Arial;
}

// should result in something like

$font-100: normal 100 12px/1 Arial;
$font-200: normal 200 12px/1 Arial;
$font-300: normal 300 12px/1 Arial;

// So that we can use it as follows when needed

.span {
    font: $font-200;
    p {
       font: $font-100
    }
}

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

Answer 7

我需要在 sass 变量中使用动态颜色值。经过大量搜索，我应用了这个解决方案：

在 application.html.erb 中：

<style>
  :root {
    --primary-color: <%= current_client.header_color %>;
    --body-color: <%= current_client.footer_color %>;
   }
</style>

在 variables.sass 中：

$primary: var(--primary-color);

繁荣，你可以走了！

参考：https://medium.com/angular-in-depth/build-truly-dynamic-theme-with-css-variables-539516e95837

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

7 个答案: