CODEWITHSUNDEEP
csssass
Dan Tao
Dan Tao

Reputation: 128317

Can I use @import to take what I want, then discard the rest?

Say I am using SASS and I want to borrow heavily from some existing stylesheet, be it another SASS stylesheet or a CSS one. I can @import that other sheet, then use @extend to use some of its rules. Is there an option to then exclude all the other stuff I didn't use from the resulting CSS?

Upvotes: 0

Views: 66

Answers (2)

Alex Guerrero
Alex Guerrero

Reputation: 2149

There's no way to import another sass file so that @extends can be used without rendering the content. Create and import a partial full of %placeholders to use @extend without renders content would be a good choice if it wasn't be rendered like this:

_import.scss

%button {
    color: #fff;
    width: 72px;
    height: 24px;
}

main.scss

@import "import";

.button-blue {
@extend %button;
background-color: blue;
}

main.css

.button-blue {
  color: #
  width: 72px;
  height: 24px; }

.button-blue {
  border: 1px solid #fff; }

So I think that the best way to achieve your goal is import a partial with some mixins in your style, I 've been using sass for half a year and so far I haven't had a need to import @extends yet so please, tell me what you want to do exactly with the @extend and I will try to help you to get it with a @mixin

Upvotes: 1

barrett
barrett

Reputation: 327

@import takes the whole stylesheet/partial and puts it in your stylesheet, there's no way to exclude any of the rules aside from overwriting them all to defaults. If you have an originating SASS file you could abstract them all into partials and then @import what you need into your new file.

Upvotes: 1

Related Questions