Encapsulated / Namespaced CSS和Sass扩展没有嵌套选择器

Question

考虑到Sass'扩展功能不允许嵌套选择器。什么是编写模块化和命名空间Sass同时仍然使用Sass'扩展功能的强大方法。

E.g。我不希望用类似于描述符的方式污染我的“全局”名称空间，因此我可以使用Sass'扩展功能。

.button { ... }
.my-widget .large-button { @extend .button; }

此外，以下内容不适用于设计：

.my-widget .large-button { ... }
.your-widget .your-button {
  @extend .my-widget .large-button;
}

Answer 1

Sass'扩展功能不会扩展嵌套选择器，但它可以在范围内工作。

E.g。

.my-widget {
  .button { ... }
  .large-button { @extend .button; }
}

现在，在“全局”空间中找不到描述符类.button，其名称间隔为.my-widget。