如何在 Sass 中嵌套类？ [复制]

Posted 2023-03-06

【中文标题】如何在 Sass 中嵌套类？ [复制]

【英文标题】：How do I nest classes in Sass? [duplicate]

【发布时间】：2016-04-28 10:23:58

【问题描述】：

这就是我在 LESS 中所拥有的：

.light-hatching 
  background-image: url('./assets/bg-button-default.png');
  background-repeat: repeat;
  background-color: lighten(#f9f9f9, 2%);


.btn-default 
  .light-hatching;

请注意 btn-default 正在嵌套 light-hatching。这在 Sass 中不起作用。 In the guide，他们说我可以像在 LESS 上一样进行嵌套，但它确实有效。

如何实现与 Sass 中相同的 LESS 示例相同的效果？

【问题讨论】：

你所做的不叫做“嵌套”。

@cimmanon 我不知道.. 根据我很快会接受的答案，我看到它被称为扩展

其实你所做的就是所谓的mixins。在 LESS 中，每个选择器实际上都是一个没有参数的 mixin。 Extend 在大多数情况下可能会产生类似的效果，但它不会产生与您的 LESS 代码相同的结果。甚至可能让您在媒体查询方面遇到麻烦。 Sass 不支持您使用 LESS 代码演示的功能。

【参考方案1】：

我认为您正在寻找的是@extend，它从另一个选择器（或占位符）导入样式。

.btn-default 
    @extend .light-hatching;

【讨论】：

这个答案具有误导性，因为使用 @extend 扩展不会给您相同的结果，因为 OP 的示例会在 LESS 中为您提供。在 LESS 中，样式将被复制到 .btn-default 选择器，而在 SCSS 中，.btn-default 选择器将被添加到 .light-hatching。当您想要@extend 多个选择器时，这一点变得更加明显。

不，它没有。看看这个 SassMeister 要点：sassmeister.com/gist/816aa35741b276d7670bdbfd3e6a7036。它只是将.btn-default 附加到另外两个类，而不是像LESS 那样将它们的规则集复制到.btn-default 中。