How to import specified classes from CSS file instead of everything

Question

I'm trying to import some classes from a CSS file like bootstrap.css to my site.scss SASS file, not all of them. The problem with following code is that I get all bootstrap classes in my compiled site.css file:

site.scss

@import "bootstrap";

.my-div-md-6
{
    /*some other styles*/
    @extend .col-md-6;
}

On the other hand, It is possible to do this with LESS by importing bootstrap.css as reference using this code:

site.less

@import (less, reference) "bootstrap.css";

.my-div-md-6{
     /*some other styles*/
    &:extend(.col-md-6);
}

The compiled output of LESS is very light as below:

site.css

.my-div-md-6 {
  position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
}
@media (min-width: 992px) {
  .my-div-md-6 {
    float: left;
  }
  .my-div-md-6 {
    width: 50%;
  }
}
.my-div-md-6 {
  /*some other styles*/
}

Is it possible to achieve this with SASS? If yes, giving a quick example would help.

Answer 1

Unfortunately, there is not simple answer and at the time of writing this, Ruby Sass does not natively support the LESS import (reference) feature.

---

TLDR; Suggestions:

• use uncss or postcss to remove the compiled css from file before finalising stylesheet.
• if you can, use mixins and placeholder classes as a rewrite of the scss file, but this is the MOST time consuming.
• import "file" as partial such that file="_file.scss" and @extend .class if you absolutely have to, (manual method but suppose it'll work)

---

UNCSS

You can use uncss as a package from npm to remove the compiled css (I know this isn't efficient, but if you had to use SASS), then you'd remove the chaff that's generated from the example bootstrap import.

HOW?
QUOTE: SO-Answer-Joesph

How? The process by which UnCSS removes the unused rules is as follows:

• The HTML files are loaded by PhantomJS and JavaScript is executed.
• Used stylesheets are extracted from the resulting HTML.
• The stylesheets are concatenated and the rules are parsed by css-parse.
• document.querySelector filters out selectors that are not found in the HTML files.
• The remaining rules are converted back to CSS.

So yes, it removes selectors not in the DOM at runtime. If you have dynamically added selectors, you can make uncss ignore them by commenting: /* uncss:ignore */ before them, e.g...

MAKE SURE YOU ADD THE MEDIA OPTION IN UNCSS
REF: SO-Answer-Deksden

---

SASS Background research:
Summarising above:

nex3: one of the core leads for sass, has been at google and working on dart. They released dart-sass (unstable release) as a rewrite in favour to replace and improve upon ruby sass. This is interesting as this rewrite also explains the lack of feature development in Ruby Sass as well as the need for a rewrite. Since a core contributor of a ruby sass port: i.e. libsass (C++ implementation of ruby-sass) left the libsass team, it brings a further impetus to improve on sass performance.

Credit:

• Joesph
• Deksden