不是如何而是最有效的方法来定位 Sass 中的元素？

Question

在我的 sass 中，我希望它不会失控，我有一个简单的 question/example 我想知道什么是最有效的在下面的示例中定位按钮的方法？

我个人喜欢选项 2，但我做对了吗？

说它挑剔，但我的问题如下所列，

选项 1：在 html 中为按钮 class 命名，以便在 css

中轻松定位

<div id = "box">
 <!-- Give button class/id -->
 <button class = "button1"></button>
</div>

选项 2：有 _buttons.scss 部分包含 .button1 class

在我的 main.scss 上，在 html 中定位没有按钮的父容器 #box class 名称，然后定位嵌套按钮

buttons.scss

.button1 {
 width: 100px;
 height: 100px;
 background-color: grey;
}

main.scss

@import 'components/buttons.scss';

#box {
 button {
  // Extend class from buttons.scss
  @extend .button1;
 }
}

Answer 1

我认为这取决于您对不同按钮使用样式的频率。不过，拥有 'box' 的 ID 对我来说似乎非常具体。你不打算有任何其他箱子吗？如果是这样，这需要是 class 而不是 id。

而不是定位父级并为子级设置样式（当你想为没有父级的元素设置样式时会发生什么），我只是在按钮本身上设置 class 的样式。

第一个选项 - HTML

中只需要一个 class

.button1{
    /* button css */
}

第二个选项 - 需要 id 属性，特定 HTML 层次结构，更多 CSS 输出

#box button, .button1{
    /* button css */
}

Answer 2

关于 "most efficient" 什么是 SASS 和部分的很多答案取决于你完整的 SASS 配置的样子，所以很难说基于在一个具体的例子上。

您是否需要在多种样式中使用此按钮的样式sheet？

例如，如果您只有一种样式 sheet (main.scss)，我会说根本没有理由使用部分样式。当您需要在多个样式 sheet 中包含部分中的项目时，应使用部分。比如很多人会把所有的变量和mixin都写成一个partial，然后在每一个style中都include它们sheet.

鉴于这个具体的例子，更有效的做法是不使用部分。

向按钮添加 class 并在 css 中定位 class 或定位容器和子元素（不带 class）同样有效：

#box button {}
button.button1 {}

此外，如果您在#box parent 中没有其他规则，则没有理由嵌套在这里：

#box {
 button {
 }
}

只需这样做：

#box button {}

（小心使用 extends。如果在不需要它们的地方使用它们，您可能会得到一大堆不必要的样式规则。See this great article。）

Not how but MOST efficient way to target element in Sass?