What is the equivalent of LESS's “import (refe

问题:

In addition to application.css.scss, I have multiple partials like homepage.css.scss. At the moment I have to add @import 'bootstrap' to each one of them in order to use bootstrap variables and mixins.

Let's say I want to change my default links colour to red, I'd add that to application.css.scss. But the links in homepage.css.scss will not be red because the bootstrap import will override it with blue.

In LESS, I can do @import (reference) "bootstrap", how can I do that in SASS?

回答1:

The closest you will get is a silent class / placeholder. These work a little different to how LESS and reference work, you can read more on them here: http://blog.teamtreehouse.com/extending-placeholder-selectors-with-sass

LESS

lib.less

.class {
   background: red;
}

main.less

@import (reference) "lib";

.anotherClass {
   &:extend(.class);
}

SASS

lib.sass

%class {
  background: red;
}

main.sass

@import "lib";

.anotherClass {
  @extend %class;
}

CSS Output

.anotherClass {
  background: red;
}