Import scss file but do not render its contains

Question

I have a SCSS file that contains CSS. I want to extend those classes yet I don't want to render those on my main file (refer below).

File structure:

_vars.scss
main.scss

main.scss

@import 'vars';
//extend margin class
body{
    margin: @extend .m10;
}

In my _vars.scss

.m10{margin:10px;}
.p10{padding:10px;}

If the main SCSS is compiled, it will be compiled to:

main.css

.m10{margin:10px;} /* <-- i dont want to see this in my compiled scss --> */
.p10{padding:10px;} /* <-- i dont want to see this in my compiled scss --> */
body{
    margin: 10px;  /* <-- but still extent from the .m10 class of _vars.scss --> */
}

Any ideas to not display those classes from the _vars.scss yet still extending those classes in the main.scss? Is there a way to do that with SASS?

[This answer](https://stackoverflow.com/a/18408513/2405101) seems to indicate that `import` is an "all-or-nothing" with `scss` — Nepho, Nov 27 '17 at 10:08

score 3 · Answer 1 · answered Nov 27 '17 at 12:48

The way to go is to use placeholders instead of classes:

_vars.scss:

%m10 {
  margin:10px;
}
%p10 { 
  padding:10px;
}

main.scss

@import 'vars';
body {
  @extend %m10; 
}

Which produces, compiled:

body{
  margin: 10px;
}

Placeholders only produce CSS if they are used. Better, they'll concatenate all selectors using them, to avoid duplicate contents:

body {
  @extend %m10;
  background: red;
}
main > article {
  @extend %m10;
}

Will outputs:

body, main > article {
  margin: 10px;
}
body {
  background: red;
}

Thanks for that. I do forget about the placeholders all the time ! — Amaury Hanser, Nov 27 '17 at 12:55

score 2 · Answer 2 · answered Nov 27 '17 at 12:42

The output you get is exactly what it's supposed to be.

If you don't want to have:

.m10{margin:10px;} /* <-- i dont want to see this in my compiled scss --> */
.p10{padding:10px;} /* <-- i dont want to see this in my compiled scss --> 
*/
body{
margin: 10px;  /* <-- but still extent from the .m10 class of _vars.scss --> 
*/

}

You shouldn't use a class and an @extend but a mixin and an @include

Here is what you could do:

@mixin m10 {
  margin: 10px;
}

body{
  @include m10;
}

It would even be better to add a variable :

@mixin myMargin($size) {
  margin: #{$size}px;
}

.input {
   @include myMargin(10);
}

This way, you can choose your margin size.

Import scss file but do not render its contains

2 Answers2