html - SCSS - 条件包含不起作用并且所有 block 都被执行

Question

我正在尝试在 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;
}

这是代码笔链接:https://codepen.io/gaurav-neema/pen/VwpPBxY

在代码中，您可以看到即使元素不包含该属性，也会执行所有 block 并包括边距。

任何人都可以帮助确定代码有什么问题吗？

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