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:
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.
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?
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.
WARNING on line 11 of ... \sass\home.scss: "#intro" failed to @extend "ruddy". The selector "ruddy" was not found.
If I just copy the code from module.scss into homepage.scss then the problem goes away.
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
color: red
bar.sass
@import foo.sass
html
@extend %foo
Run sass bar.sass bar.css
.
bar.css appears
html {
color: red; }
PS For real SASS experience, you should leverage Compass. Compass is a bunch of things under one name:
UPD Finally error text!
You're missing the dot in the name of the class. aside {@extend ruddy;}
should be aside {@extend .ruddy;}
.