anoop chandran anoop chandran - 10 months ago 52
CSS Question

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

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


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

After i run gulp, I notice that complete bootstrap css is included to the target
. I want to dynamically include just the
.row rule
. 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 Source

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;