SCSS - 条件包括不工作并且所有块都被执行答案

【问题标题】：SCSS - Conditional include not working and all the blocks gets executedSCSS - 条件包括不工作并且所有块都被执行
【发布时间】：2021-05-21 15:04:20
【问题描述】：

我正在尝试在 scss 中进行条件包含。代码如下：

HTML

<div class="test" data-active data-label data-comment >1</div>
<div class="test" data-active data-label>2</div>
<div class="test" data-active data-comment >3</div>
<div class="test" data-active data-comment data-label>4</div>
<div class="test" data-active>5</div>

SCSS

.test[data-active]{

  background : red;
  width: 50px;
  height: 50px;
  display: inline-block;
  
  $margin: 0px;
  &[data-label]{
    background : blue;
    $margin: $margin + 10px;
  }
  &[data-comment]{
    background: yellow;
    $margin: $margin + 10px;
  }
  &[something]{
    $margin: $margin + 100px;
  }
  margin-right : $margin;
}

这里是codepen链接：https://codepen.io/gaurav-neema/pen/VwpPBxY

在代码中，你可以看到即使元素不包含属性，所有的块都会被执行并包含边距。

谁能帮忙找出代码有什么问题？

【问题讨论】：

标签： html css sass

【解决方案1】：

你每次都在重新定义$margin，你不能使用像if这样的选择器语句。

重新定义：

$margin: $margin + 10px;
$margin: $margin + 100px;

你正在设置所有margin-right: 100px;

我想你可能想要：

SCSS

$margin: 0px;

.test[data-active] {
  background: red;
  width: 50px;
  height: 50px;
  display: inline-block;
  
  &[data-label] {
    background : blue;
    margin: $margin + 10px;
  }

  &[data-comment] {
    background: yellow;
    margin: $margin + 10px;
  }

  &[something] {
    margin: $margin + 100px;
  }

  margin-right: $margin;
}

【讨论】：

我认为只有在元素中存在属性时才会执行该块。有什么解决方法吗？
这一切都被“执行”了，因为它都被渲染到你的 CSS 中，但它只有在被渲染的选择器应用于你的标记时才适用。
Idk 你对变量$margin 的具体需求是什么，尤其是因为它的0 但你正在添加它，所以你可以跳过添加并直接设置它。如果您的意图是更改基本 $margin 值，那么您仍然可以将其添加在一起并将其应用到每个选择器中。
我只是为了演示的目的添加了边距。我需要的是根据属性有选择地包含图标。
最好的做法是将所有适用于选择器的属性放在一起，因此底部的margin-right 应该在display: inline-block; 之后。并且也许您的意图是较低的选择器应该是 margin-right: $margin + 10px; 等。

【解决方案2】：

您正在寻找的是 CSS 自定义属性。 SCSS 不是动态的，并且在编译时呈现。 CSS 自定义属性是动态的，因此一旦条件为填充，它们就会被应用，这意味着当你的类被应用时，它会改变值。

在以下位置了解差异：

css-tricks.com

阅读 CSS 自定义属性：

这只是有关该主题的众多文章中的 3 篇。

现在是演示时间，我将属性更改为background-color，以便演示更清晰。

.test[data-active] {
  --background-color: aqua;

  background: var(--background-color);
  width: 50px;
  height: 50px;
  display: inline-block;
}

.test[data-label] {
  --background-color: deeppink;
}

.test[data-something] {
  --background-color: deepskyblue;
}

<div class="test" data-active data-label data-comment>1</div>
<div class="test" data-active data-label>2</div>
<div class="test" data-active data-comment>3</div>
<div class="test" data-active data-comment data-label>4</div>
<div class="test" data-active data-something>5</div>

【讨论】：