sass - Sass - 用另一个变量分配变量

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

使用 csscalc()函数：

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

Answer 3

您可以定义地图：

来自Sass 文档

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