在 SASS / SCSS 中定义变量覆盖答案

【问题标题】：Defining variable overrides in SASS / SCSS在 SASS / SCSS 中定义变量覆盖
【发布时间】：2017-04-03 14:40:05
【问题描述】：

我以前使用过 sass，并且对我认为可能或应该存在于 sass 中的功能有一个相关的问题。

是否有可能做这样的事情，以及如何做：

$base-color: #ffffff;
.pink {
  $base-color: #ec008c;
}
.green {
  $base-color: #a4d20e;
}
a, .pink a, .green a {
  color: $base-color;
}

这意味着我可以为<body> 元素提供一个.pink 类，这将使该页面中的所有<a> 元素都变成“粉红色”。这虽然是一个过于简单的例子，但似乎是 SASS 应该做的事情。

这意味着上面的 scss 会编译成这样：

a {
  color: #ffffff;
}
.pink a {
  color: #ec008c;
}
.green a {
  color: #ec008c;
}

正如我之前所说的过于简化，请考虑以下几点：

$base-color: #ffffff;
.pink {
  $base-color: #ec008c;
}
.green {
  $base-color: #a4d20e;
}
.pink, .green {
  #header #nav li a {
    color: $base-color;
  }
}

应该给我这样的东西：

.pink #header #nav li a {
    color: #ec008c;
}
.green #header #nav li a {
    color: #a4d20e;
}

这似乎在 SCSS/SASS 中应该是可行的，并且会在编码时间和可维护性方面为大型项目带来很多好处。

【问题讨论】：

显然，在适当的情况下，编译后的 CSS 将比 SCSS 中所需的多行。

标签： css sass

【解决方案1】：

我不知道是否有任何方法可以使用您提出的语法使 SASS 工作，但您可以使用 mixins 实现类似的效果。我会这样做：

@mixin anchor { color: $base-color; }
@mixin headernav {
  #header #nav { color: $base-color; }
  #header #nav li a { color: $base-color; }
}

$base-color: #ffffff;
a { @include anchor; }
@include headernav;

.pink {
  $base-color: #ec008c;
  a { @include anchor; }
  @include headernav;
}

.green {
  $base-color: #a4d20e;
  a { @include anchor; }
  @include headernav;
}

这会产生以下 CSS 输出：

a {
  color: white; }
#header #nav {
  color: white; }
#header #nav li a {
  color: white; }

.pink a {
  color: #ec008c; }
.pink #header #nav {
  color: #ec008c; }
.pink #header #nav li a {
  color: #ec008c; }

.green a {
  color: #a4d20e; }
.green #header #nav {
  color: #a4d20e; }
.green #header #nav li a {
  color: #a4d20e; }

基本上，您可以将整个样式表构建为 mixin，然后在 .pink 和 .green 类中将 @include 该 mixin。

【讨论】：

似乎 $base-color 必须传递给 @minin 有点像这样：.green { @include headernav(#a4d20e); } 等等，但除此之外是的，这个解决方案有效
它工作正常，就像我写的一样（用 sass 版本 3.1.7 测试），但你也可以设置 mixin 来接受参数。在这种情况下它可能看起来更整洁，但如果你的 mixin 增长了，你最终可能会得到更多的变量，例如$bg-color、$highlight-color、$active-color、$dimmed-color。在这种情况下，我认为当您包含 mixin 时，将它们全部作为参数传递可能会开始看起来很混乱。