8

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; }
.c { @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?

Community
  • 1
  • 1
dthree
  • 19,847
  • 14
  • 77
  • 106

2 Answers2

15

That's what placeholders made for. 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; 
}

I.e. the stretch class is not included in the final compiled CSS, but you could still use it in SASS.

Krasimir
  • 13,306
  • 3
  • 40
  • 55
  • That's perfect. Somehow I totally missed the boat on placeholders. This is exactly what I needed. Thanks. – dthree Sep 15 '13 at 18:54
  • @krasimir And what if I want to extend a certain class that gets applied to a DOM element and hence cannot be a placeholder? How would you deal with this problem? Create both, a class and a placeholder? Like `%red, .red`? – LordTribual May 27 '16 at 07:49
  • I'll probably go with just `.red`. – Krasimir May 27 '16 at 12:54
  • umm.. no? this results in `... failed to @extend "%stretch"`, even though I imported the other file :/ – phil294 Feb 24 '17 at 00:05
0

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

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

in origin.sass

$variable_color = #877889

.one, .another, .two
  @extend .fatherclass

in another.sass

@import origin

.one
  color: $variable_color
gzfrancisco
  • 812
  • 10
  • 14
  • 1
    Thanks, but I don't think you got my question. If each CSS file imports the extendable class (.stretch), that class will appear in the 20 or 30 files I use in my application, which is what I am trying to avoid. – dthree Sep 15 '13 at 01:23
  • 1
    @DaveC use placeholders – Adam Wolski Sep 15 '13 at 08:19