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

Question

更新：working CodePen 具有 css 可变解。

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

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

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

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

谢谢！

Answer 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>

Answer 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 那样做

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

How can I include a mixin that contains a variable, then change that variables value inside a parent combinator?

css

variables

sass

mixins

scss-mixins