anoop chandran anoop chandran - 1 month ago 12
CSS Question

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?

Answer

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;
}