CODEWITHSUNDEEP
csstwitter-bootstrapsassgulpstylus
anoop chandran
anoop chandran

Reputation: 1490

How to @import without including all CSS but just the @extends ones

I'm using stylus with bootstrap-stylus. This is my app.styl code

@import "../../node_modules/bootstrap-stylus/lib/bootstrap.styl";
section
    @extend .row

After i run gulp, I notice that complete bootstrap css is included to the target app.css. I want to dynamically include just the .row rule using @extend. what I'm trying to get is this..

section { //.row rules
    zoom: 1;
    margin-left: -20px;
}

Is it possible? What am I missing? Is it possible with SASS?

Upvotes: 2

Views: 953

Answers (1)

MattDiMu
MattDiMu

Reputation: 5003

AFAIK both stylus and sass do not support importing only certain selectors of a file. If you have control over the imported file, though, you could use SASS placeholder selectors instead of classes/ids. A placeholder selector is some sort of abstract selector which simply doesn't render anything by default.

/* _partial.scss */
%some-selector {
  prop: value;
}
%another-selector {
  prop: value;
}

/* main.scss */
@import 'partial';
.some-class {
  @extend %some-selector;
}

results in the not-extended placeholder selectors being ignored (in this case %another-selector)

/* output.css */
.some-class {
  prop: value;
}

Upvotes: 1

Related Questions