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

Question

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

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

• 仅使用语义类名称或id或其他
• 在一些常见样式表中定义模块或模式
• 每页样式表将@extend模块从公共样式表扩展到与给定页面相关的语义选择器

所以这个：

/* 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。当我尝试编译上面的代码时，我得到一个错误，如。

  

警告第11行...... \ sass \ home.scss：“＃intro”未能@extend“ruddy”。     找不到选择器“ruddy”。

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

Answer 1

事实并非如此。

您可以在一个文件中声明类（包括%-prefixed ones），将第一个文件导入第二个文件并在第二个文件中扩展类。

示例：

<强> 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体验，您应该使用Compass。指南针是一堆名称下的东西：

• 一个有效编译SASS的工具;
• 适合各种场合的大型SASS风格库;
• 您可以毫不费力地在项目中安装和使用的扩展生态系统。这就是SASS脱颖而出的原因。你不必一遍又一遍地重新发明轮子。

UPD 最后错误文字！

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

Answer 2

问题在于：

#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;}