SASS - class extension for multiple files

Question

I have a project that uses Compass with SASS/SCSS . This is a one page application.

I have a main .scss file containing 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 css user interface.

My system uses AMD to import other modules later, after loading. This means that some style sheets are loaded after the fact.

Each module, or “Application Style Sheet” imports a main .scss file that has all the variables, etc. There are no actual class declarations in master.scss, so there are no duplicate imports when loading the module.

Now I prefer to use @extend over mixins , where I repeat the same code. For instance:

 .a { @extend .stretch; } 

Instead:

 .a { @include stretch(); }, 

Which gives the same result:

 .a { position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; } 

Executing extend better since repeating this code is not splattered everywhere. Performing this action:

 .stretch { @include stretch() } .a { @extend .stretch; } .b { @extend .stretch; } .c { @extend .stretch; } 

Only produces:

 .stretch, .a, .b, .c { position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; } 

Unlike:

 .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 would put an extensible class ( .stretch ) in the master.scss file, it will copy itself to every css page. If I put it in the base.scss file, Compass does not seem to recognize the class when compiling, and therefore does not extend it.

Not sure if the best way to solve this problem. Then my exact question is:

How to extend css class to multiple files only by declaring it once?

Answer 1

What the placeholders did. Instead of this:

 .stretch { color: #F00 } .a { @extend .stretch; } .b { @extend .stretch; } .c { @extend .stretch; } 

use this:

 %stretch { color: #F00 } .a { @extend %stretch; } .b { @extend %stretch; } .c { @extend %stretch; } 

It will produce the following css:

 .a, .b, .c { color: red; } 

those. the stretch class is not included in the final compiled CSS, but you can still use it in SASS.

Answer 2

Use the @import method in Sass. This makes all mixes, variables, and more available for another sass file.

http://sass-lang.com/tutorial.html

in origin.sass

 $variable_color = #877889 .one, .another, .two @extend .fatherclass 

at another.sass

 @import origin .one color: $variable_color