如何包含一个包含变量的 mixin，然后在父组合器中更改该变量值？答案

【问题标题】：How can I include a mixin that contains a variable, then change that variables value inside a parent combinator?如何包含一个包含变量的 mixin，然后在父组合器中更改该变量值？
【发布时间】：2019-02-04 23:25:05
【问题描述】：

更新：working CodePen 使用 css 变量解决方案。

更新：CSS-Tricks explains css 变量级联，当它们改变时浏览器会重新绘制。预处理器变量没有这些特性。

很难说清楚……在通过 mixin 包含全局变量后，Sass 中是否可以用局部变量覆盖全局变量？

即：我希望为全局变量 $color 设置默认值，并为特定颜色变量（如 $red: red; 和 $blue: blue;）设置值。然后在mixin中使用全局$color，然后在.class {}中使用@include，然后用父组合器中的局部变量覆盖全局$color的值，如.class { &.one { $color: $red; } &.two { $color: $blue; }}

全局$color的原始值是渲染，而不是改变为局部变量的值。我研究了!default 和!global，但对我的情况没有多大帮助。

谢谢！

【问题讨论】：

标签： css variables sass mixins scss-mixins

【解决方案1】：

听起来 CSS 变量的工作：

body {
  padding: 1rem;
  width: 1000px;
  margin: 0 auto;
}

$color: #000000;
$blue: #0087ff;
$red: #ff2828;
$yellow: #ffe607;

@mixin item {
  display: inline-block;
  margin: 0 1rem 1rem 0;
  width: 8rem;
  height: 8rem;
  border-radius: 4px;
  background-color: var(--c,$color);
}

@mixin circle {
  border-radius: 50%;
}

.item {
  @include item;

  &.one {
    --c: #{$blue};
  }

  &.two {
    --c: #{$red};
    @include circle;
  }

  &.three {
    --c: #{$yellow};
    @include circle;
  }
}

完整编译代码：

body {
  padding: 1rem;
  width: 1000px;
  margin: 0 auto;
}

.item {
  display: inline-block;
  margin: 0 1rem 1rem 0;
  width: 8rem;
  height: 8rem;
  border-radius: 4px;
  background-color: var(--c, #000000);
}
.item.one {
  --c: #0087ff;
}
.item.two {
  --c: #ff2828;
  border-radius: 50%;
}
.item.three {
  --c: #ffe607;
  border-radius: 50%;
}

<body>
  <div class="item one"></div> <!-- blue square -->
  <div class="item two"></div> <!-- red circle -->
  <div class="item three"></div> <!-- yellow circle -->
</body>

【讨论】：

谢谢@temani-afif，这行得通。好奇为什么 css var 有效但 Sass var 无效，我将继续研究这两者。在我的用例中，我可以使用 css 变量。谢谢！

【解决方案2】：

我认为它不起作用，因为在您定义 background-color 的那一刻，$color 的值是黑色的，所以所有形状都是黑色的。在下一步中，编译器在不同的子类中读取$color 的新值，但该值从未重新分配给background-color。如果你像这样重新分配它会起作用：

body {
  padding: 1rem;
  width: 1000px;
  margin: 0 auto;
}

$color: #000000;
$blue: #0087ff;
$red: #ff2828;
$yellow: #ffe607;

@mixin item {
  display: inline-block;
  margin: 0 1rem 1rem 0;
  width: 8rem;
  height: 8rem;
  border-radius: 4px;
  background-color: $color;
}

@mixin circle {
  border-radius: 50%;
}

.item {
  @include item;
  background-color:$color;

  &.one {
    $color: $blue ;
    background-color: $color;
  }

  &.two {
    $color: $red;
    background-color: $color;
    @include circle;
  }

  &.three {
    $color: $yellow;
    background-color: $color;
    @include circle;
  }
}

或者像 Temani 那样做

【讨论】：

感谢@linh 提供纯 Sass 解决方案。我将使用 Temani 的 css var 解决方案，因为在您的示例中，在课堂上使用 $color: $blue; background-color: $color; 并不比在课堂上使用 background-color: $blue 更干燥。谢谢！