Question

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

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

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

这意味着我可以向.pink元素提供课程<body>，这会使该页面中的所有<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 中应该可行的东西，并且在编码时间和可维护性方面都会在大型项目上支付大量红利。

Answer 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，然后将@include混合在.pink和.green类中。

在SASS / SCSS中定义变量覆盖

1 个答案: