SASS - Extend class across multiple files
I have a project that uses Compass with SASS/SCSS. It is a single page
application.
I have a master .scss file that holds all of my variables, mixins and
function declarations.
//Master.scss
$foo: 'bar';
@function border($color) {
@return 1px solid $color;
}
// etc.
I have a base.scss file that has the main UI's css.
My system uses AMD to import other modules later on, after load. This
means some stylesheets are loaded after the fact.
Each module, or 'App''s stylesheet imports the master .scss file, which
has all of the variables, etc. The master.scss does not have any actual
class declarations, so there are no duplicate imports when a module is
loaded.
Now, I prefer using @extend over mixins where I am repeating the same
code. Such as:
.a { @extend .stretch; }
Instead of:
.a { @include stretch() },
Which both produce the same result:
.a { position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; }
Doing an extend is better, as then a repeat of that code is not splattered
all over the place. Doing this:
.stretch { @include stretch() }
.a { @extend .stretch; }
.b { @extend .stretch; }
.b { @extend .stretch; }
Only produces:
.stretch, .a, .b, .c { position: absolute; top: 0px; right: 0px; bottom:
0px; left: 0px; }
As opposed to:
.a { position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; }
.b { position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; }
.b { position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; }
So we like extend. Now the only problem, is that if I put the extendable
class (.stretch) into the master.scss file, it will copy itself to every
single css page. If I put it into the base.scss file, Compass does not
seem to recognize the class when compiling and so does not extend it.
Not sure what the best way to go to solve this is. My exact question then,
is:
How do I extend a css class across multiple files while only declaring it
once?
No comments:
Post a Comment