时间戳

首页 > 解决方案 > 在 SCSS 中使用嵌套时，最佳实践是什么？

css - 在 SCSS 中使用嵌套时，最佳实践是什么？

问题描述

假设我有两个班级，.foo并且.bar.

目前，存在具有.foo该类的元素，这些元素可能有也可能没有.bar该类的后代。但是，具有该类的每个元素都是具有.bar该类的元素的后代.foo。例如：

<div class="foo">
</div>

<div class="foo">
    <div class="bar">
    </div>
</div>

现在说我正在使用 SCSS 来设置这些类的样式。以下哪个选项是更好的做法？

第一个选项是.bar嵌套.foo：

.foo {
    // some rules...

    .bar {
        // some rules...
    }
}

第二个选项是为两个类设置单独的顶级选择器，并.bar在它是 的后代时使用父选择器来引用.foo：

.foo {
    // some rules...
}

.bar {
    .foo & {
        // some rules...
    }
}

目前我倾向于第二种选择，主要是因为以下原因：

考虑将来的一个案例，.bar当它不是.foo. 在第一个选项中，我必须创建另一个顶级选择器，.bar以使该类的规则出现在两个不同的位置。然而，如果我使用第二个选项，我只需将这些规则添加到块.bar之外的现有顶级选择器中。.foo &

我认为第二种选择是更好的做法是否正确？

标签： csssass

解决方案

SCSS用于简化代码并具有最少数量的类和 id。

您的第一种方式更好，因为代码看起来非常简单易读。

您的第二种方式不必要地为代码增加了复杂性。

当您说 .bar 不在 .foo 内时，您可以直接为其编写代码，而无需在 .foo 内。

考虑：

<div class="foo">

  This is foo...

  <div class="bar">

    This is bar inside Foo ...

  </div>

</div>

<div class="bar">

  This is bar ...

</div>

SCSS：

.foo {
 color: red;

  .bar {
    color: green
  }
}

.bar {
  color: blue;
}

推荐阅读