Question

我有这个变量：

$color_pr1: #d6ad3f;

现在，我正在使用Gumby并使用它自己的设置表，其中设置了以下内容：

$header-font-color: #55636b !default;

是否可以使用$color_pr1代替？喜欢这个？

$header-font-color: $color_pr1; ?

如果现在，我是否认为这一切都错了？我想拥有自己的颜色等，并在我的项目中重复使用它们。

Answer 1

来自文档：http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#variable_defaults_

如果尚未通过添加分配变量，则可以将其分配给变量！default标志到值的结尾。这意味着，如果已经分配了变量，它不会被重新分配，但是如果它没有价值，它将被赋予一个。

例如：

$content: "First content";
$content: "Second content?" !default;
$new_content: "First time reference" !default;

#main {
  content: $content;
  new-content: $new_content;
}

编译为：

#main {
  content: "First content";
  new-content: "First time reference"; }

具有空值的变量被视为未分配的！default：

$content: null;
$content: "Non-null content" !default;

#main {
  content: $content;
}

编译为：

#main {
  content: "Non-null content"; }

Answer 2

您可以定义地图：

来自Sass Documentation

Users occasionally want to use interpolation to define a variable name based on another variable. Sass doesn’t allow this, because it makes it much harder to tell at a glance which variables are defined where. What you can do, though, is define a map from names to values that you can then access using variables.

SCSSSassCSS
SCSS SYNTAX
@use "sass:map";

$theme-colors: (
  "success": #28a745,
  "info": #17a2b8,
  "warning": #ffc107,
);

.alert {
  // Instead of $theme-color-#{warning}
  background-color: map.get($theme-colors, "warning");
}

Answer 3

使用css calc()函数：

$header-font-color: calc(#{$color_pr1});

Sass - 使用另一个变量赋值变量

3 个答案: