Question

更新：https://www.ebayclassifiedsgroup.com/mobile.html，带有CSS变量解决方案。

更新：working CodePen，css变量级联，并且浏览器在更改时重新绘制。预处理程序变量没有这些功能。

很难用明确的措辞来表达……在通过混合添加了全局变量之后，Sass是否有可能用局部变量覆盖全局变量？

即：我想为全局变量$color设置默认值，并为$red: red;和$blue: blue;之类的特定颜色变量设置值。然后在mixin中使用全局$color，然后在@include中使用.class {}混合，然后在父组合器（如$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一样做

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

2 个答案: