Search code examples
csssassoocss

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

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.

Solution

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