封装/命名空间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。