css - 使用 SCSS 的有效 CSS 结构

我想知道下面的 SCSS代码示例有效。此代码按预期工作正常，但希望更深入地了解此结构。

有两个类名为setting-value的内联元素和 setting-name ，我们需要在 setting-value 的右边留一些额外的边距。 .

下面是我写的代码:

案例 1

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

这将为具有类设置值的元素添加额外的 10px 左边距。我也可以这样写:

案例 2

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

想知道要遵循的正确结构是什么。或者最佳做法应该是什么？

最佳答案

你可以做到

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

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

这仅在类只有“setting-SOMETHING”值时有效。例如，它适用于 <div class="setting-value">但不适用于 <div class="header setting-value">因为类(class)需要以 setting- 开始.

关于css - 使用 SCSS 的有效 CSS 结构，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57321177/