使用SCSS的有效CSS结构

Question

我想知道下面的SCSS代码示例是否有效。 这段代码可以正常工作，但是希望对此结构有更多的了解。

有两个内联元素，其类名称为setting-value和setting-name ，我们需要在setting-value的右边添加一些空白。

以下是我编写的代码：

情况1

.setting-value,
.setting-name {
  word-wrap: break-word;
  &.setting-value {
    margin-left: 10px;
  }
}

这将为具有class setting-value的元素增加10px的左边距。 我也可以这样写：

案例2

.setting-value,
.setting-name {
  word-wrap: break-word;
}  
.setting-value {
  margin-left: 10px;
}

想知道哪个是正确的结构。 或最佳做法应该是什么？

Answer 1

你可以做

[class^="setting-"] {
  word-wrap: break-word;
}

[class="setting-name"] {
  margin-left: 10px;
}

• 仅当类仅具有“ setting-SOMETHING”值时，此方法才有效。 例如，它适用于<div class="setting-value">但不适用于<div class="header setting-value">因为类需要以setting-开头。