我怎么能包括包含一个变量一个mixin，然后更改父组合子里面的变量值？

问题描述 投票：3回答：2

UPDATE：working CodePen利用CSS可变溶液。

更新：CSS-Tricks explains该CSS变量级联，而当他们改变了浏览器重新绘制。预处理程序变量不具备这些功能。

很难把这个明确的措词...是有可能在萨斯覆盖全局变量与所述后全局变量通过混入被列入一个局部变量？

即：我期待一个全局变量$color设置默认值，像$red: red;和$blue: blue;特定颜色变量的值。然后使用全球$color一个mixin里面，然后@include内.class {}是混入，然后用像$color父组合程序内的局部变量覆盖全球.class { &.one { $color: $red; } &.two { $color: $blue; }}的价值

全球$color的原始值呈现，而不是改变到局部变量的值。我研究!default和!global但没有发现太多，在我的案件有帮助。

谢谢！

css variables sass mixins scss-mixins
2个回答
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>
0
投票

我认为这是行不通的，因为此刻你定义background-color $color的值黑色，所以所有的形状是黑色的。在接下来的步骤中，编译器读取$color在不同的子类的新的价值，但这种价值从未reasigned到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;
  }
}

还是不喜欢它毯螅

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.