CODEWITHSUNDEEP
cssimportsass
nu everest
nu everest

Reputation: 10249

Can I import one or more Subsections from a SASS file?

My SASS-generated CSS files are filling up with a bunch of stuff I don't need. This means my users have to download a much bigger CSS file than they really need.

In most programming languages it is possible to create an import statement like this:

from "some_codefile" import Dog, Cat, Fish

For a SASS scenario lets assume I have a partial file _colors.scss,

It contains:

$white: #ffffff;

@mixin black() {
    color: black;
}

.red {
    color: red;
}

.blue {
    color: blue;
}

Now I want to import $white, @include black, and .red. However, I do not use the .blue class and do not want to import it since it will just take up space in my CSS file.

I tried:

@import "colors.scss" white, black, red;

But it just gives syntax errors.

How do I prevent my CSS file from filling up with stuff I do not need?

Upvotes: 1

Views: 36

Answers (1)

steveax
steveax

Reputation: 17743

No, that is not possible. You can however use placeholder selectors in your partials and they will not be rendered unless they are @extended.

$white: #ffffff;

@mixin black {
    color: black;
}

%red {
    color: red;
}

%blue {
    color: blue;
}

.foo {
  @extend %red;
}

.bar {
  @extend black;
}

Upvotes: 2

Related Questions