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

时间:2014-03-05 17:21:15

标签: css namespaces nested sass

考虑到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;
}

1 个答案:

答案 0 :(得分:0)

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

E.g。

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

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