How to @extend from another sass file, or how to achieve OOSASS? [duplicate]

Question

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:

• 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

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.

Answer 1

The problem is here:

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

ruddy and fullwidth aren't selectors. If you're extending the .ruddy class, you need to include the period, as that is part of the selector.

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

Answer 2

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:

• 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.

UPD Finally error text!

You're missing the dot in the name of the class. aside {@extend ruddy;} should be aside {@extend .ruddy;}.