17

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

我喜欢 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。当我尝试编译上述代码时，出现类似错误。

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

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

4

2 回答 2

13

问题在这里：

#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;}
于 2013-06-15T03:02:01.200 回答
12

这不是真的。

您可以在一个文件中声明类（包括以% 为前缀的类），将第一个文件导入第二个文件并扩展第二个文件中的类。

例子：

傻瓜

%foo
  color: red

酒吧.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;}。

于 2013-06-15T00:17:38.547 回答