CSS 如何从另一个sass文件@extend，或者如何实现OOSASS？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17118845/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to @extend from another sass file, or how to achieve OOSASS?
提问by Moss
My question is actually broader than the title says. This is just where I am running into a snag with my idea, but I am open to all sorts of solutions. Let me explain my overall goal.
我的问题实际上比标题所说的更广泛。这正是我的想法遇到障碍的地方，但我对各种解决方案持开放态度。让我解释一下我的总体目标。
I like what CSS preprocessors can do. I like the ideas of OOCSS and SMACSS. I am new to all of this. I am trying to upgrade my design methods to somehow incorporate the best of all worlds. I have a theoretical method that works like this:
我喜欢 CSS 预处理器可以做的事情。我喜欢 OOCSS 和 SMACSS 的想法。我对这一切都很陌生。我正在尝试升级我的设计方法，以某种方式融合所有世界中最好的东西。我有一个像这样工作的理论方法：
- use only semantic class names or id's or whatever
- define modules or patterns in some common style sheet
- have per page stylesheets that @extend modules from the common stylesheet onto the semantic selectors pertaining to a given page
- 仅使用语义类名称或 ID 或其他任何内容
- 在一些常见的样式表中定义模块或模式
- 每页样式表将模块从公共样式表@extend 到与给定页面相关的语义选择器上
So this:
所以这：
/* modules.scss */
.ruddy {color: red}
.fullwidth {width: 100%; display: block;}
plus this:
加上这个：
/* homepage.scss */
@import modules.sass
#intro {@extend ruddy; @extend fullwidth}
aside {@extend ruddy;}
.thing {@extend fullwidth;}
becomes this:
变成这样：
/* homepage.css */
#intro, aside {color: red}
#intro, .thing {width: 100%; display: block;}
I haven't necessarily seen anybody else do this but it seemed like a good idea to me. The problem I am running into in my grand scheme is that @extend doesn't seem to work from an imported file. Someone somewhere else on SO said that it is not possible. Is this true? I got mixins to work but problem with them is that they duplicate every attribute in the output css, which doesn't seem ideal.
我不一定看到其他人这样做，但这对我来说似乎是个好主意。我在宏伟计划中遇到的问题是 @extend 似乎无法从导入的文件中工作。SO上的其他人说这是不可能的。这是真的？我让 mixin 可以工作，但它们的问题是它们复制了输出 css 中的每个属性，这似乎并不理想。
I'm actually more partial to LESS (syntax), but that doesn't even have extending at the moment. Should I not worry about the inefficiencies of mixins or is there some way to achieve what I'm asking for?
我实际上更偏爱 LESS（语法），但目前还没有扩展。我不应该担心 mixin 的低效率还是有什么方法可以实现我的要求？
Note:I am auto-compiling my sass with a tool called Prepros. When I try to compile code such as the above I get an error like.
注意：我正在使用名为 Prepros 的工具自动编译我的 sass。当我尝试编译上述代码时，出现类似错误。
WARNING on line 11 of ... \sass\home.scss: "#intro" failed to @extend "ruddy". The selector "ruddy" was not found.
警告... \sass\home.scss 的第 11 行：“#intro”未能@extend“ruddy”。未找到选择器“红色”。
If I just copy the code from module.scss into homepage.scss then the problem goes away.
如果我只是将 module.scss 中的代码复制到 homepage.scss 中，那么问题就会消失。
采纳答案by cimmanon
The problem is here:
问题在这里：
#intro {@extend ruddy; @extend fullwidth}
aside {@extend ruddy;}
.thing {@extend fullwidth;}
ruddyand fullwidtharen't selectors. If you're extending the .ruddyclass, you need to include the period, as that is part of the selector.
ruddy并且fullwidth不是选择器。如果要扩展.ruddy类，则需要包含句点，因为它是选择器的一部分。
#intro {@extend .ruddy; @extend .fullwidth}
aside {@extend .ruddy;}
.thing {@extend .fullwidth;}
回答by Andrey Mikhaylov - lolmaus
It is not true.
这不是真的。
You can declare classes (including the %-prefixed ones) in one file, import the first file into the second file and extend the classes in the second file.
您可以在一个文件中声明类（包括% 前缀的类），将第一个文件导入第二个文件并扩展第二个文件中的类。
Example:
例子：
foo.sass
foo.sass
%foo
color: red
bar.sass
酒吧.sass
@import foo.sass
html
@extend %foo
Run sass bar.sass bar.css.
运行sass bar.sass bar.css。
bar.cssappears
bar.css出现
html {
color: red; }
PS For real SASS experience, you should leverage Compass. Compass is a bunch of things under one name:
PS 要获得真正的 SASS 体验，您应该利用Compass。指南针是同一个名字下的一堆东西：
- a handy tool to compile SASS efficiently;
- a huge library of handy SASS styles for all occasions;
- an ecosystem of extensions that you can install and use in your projects effortlessly. This is what makes SASS stand out. You don't have to reinvent the wheel over and over again.
- 一个高效编译 SASS 的便捷工具；
- 一个巨大的方便的 SASS 样式库，适用于所有场合；
- 您可以毫不费力地在项目中安装和使用的扩展生态系统。这就是使 SASS 脱颖而出的原因。您不必一遍又一遍地重新发明轮子。
UPDFinally error text!
UPD最后错误文本！
You're missing the dot in the name of the class. aside {@extend ruddy;}should be aside {@extend .ruddy;}.
您缺少班级名称中的点。aside {@extend ruddy;}应该是aside {@extend .ruddy;}。
