如何@extend从另一个sass文件,或如何实现OOSASS？

Question

我的问题实际上比标题所说的更广泛.这正是我遇到想法的障碍,但我对各种解决方案持开放态度.让我解释一下我的总体目标.

我喜欢CSS预处理器可以做的事情.我喜欢OOCSS和SMACSS的想法.我是所有这一切的新手.我正在尝试升级我的设计方法,以某种方式融入最好的世界.我的理论方法是这样的:

所以这:

/* modules.scss */
.ruddy {color: red}
.fullwidth {width: 100%; display: block;}

加上这个:

/* homepage.scss */
@import modules.sass

#intro {@extend ruddy; @extend fullwidth}
aside {@extend ruddy;}
.thing {@extend fullwidth;}

成为这个:

/* homepage.css */
#intro, aside {color: red}
#intro, .thing {width: 100%; display: block;}

我没有看到别人这样做,但对我来说这似乎是个好主意.我在我的宏计划中遇到的问题是@extend似乎不能从导入的文件中运行.在SO的其他地方有人说这是不可能的.这是真的？我有mixins工作,但问题是他们复制输出css中的每个属性,这似乎不理想.

我实际上更偏爱LESS(语法),但目前甚至没有延伸.我不应该担心mixins效率低下还是有办法实现我的要求？

注意: 我使用名为Prepros的工具自动编译我的sass.当我尝试编译如上所述的代码时,我得到一个错误.

警告在......\sass\home.scss的第11行:"#intro"未能@extend"ruddy".未找到选择器"ruddy".

如果我只是将module.scss中的代码复制到homepage.scss中,那么问题就会消失.

Answer 1

问题出在这里:

#intro {@extend ruddy; @extend fullwidth}
aside {@extend ruddy;}
.thing {@extend fullwidth;}

ruddy而fullwidth不是选择者.如果要扩展.ruddy类,则需要包含句点,因为它是选择器的一部分.

#intro {@extend .ruddy; @extend .fullwidth}
aside {@extend .ruddy;}
.thing {@extend .fullwidth;}

Answer 2

这不是真的.

您可以在一个文件中声明类(包括%-prefixed one),将第一个文件导入第二个文件并在第二个文件中扩展类.

例:

foo.sass

%foo
  color: red

bar.sass

@import foo.sass
html
  @extend %foo

跑sass bar.sass bar.css.

bar.css出现

html {
  color: red; }

PS对于真正的SASS体验,你应该利用指南针.指南针是一堆名称下的东西:

UPD最后错误文字!

你错过了班级名称中的点.aside {@extend ruddy;}应该是aside {@extend .ruddy;}.