SASS how to import specified classes from CSS file and not all

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

site.scss

@import "bootstrap";

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

      

Alternatively, it can be done with LESS by importing bootstrap.css as a link with 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-colored as shown 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*/
}

      

Can this be achieved with SASS ? If so, a quick example will help.

Thank.

+3


source to share


1 answer


Unfortunately there is no easy answer and Ruby Sass

does not support the LESS function at the time of this writing import (reference)

.


TL; DR; Suggestions:

  • use uncss or postcss to remove the compiled css from the file before finalizing your stylesheet.
  • if you can, use mixins and placeholder classes as scss file overwrite, but this is MOST time .
  • import "file"

    as partial, so file="_file.scss"

    and @extend .class

    if you absolutely need to (manual method, but assume it will work)

UNCSS

You can use uncss as a package from npm

to remove the compiled css (I know it is not efficient, but if you had one to use SASS

) then you remove the chaff generated from the bootstrap load example.

AS?
QUOTE: SO-Answer-Joesph



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

  • HTML files are loaded with PhantomJS and JavaScript is executed.
  • The stylesheets used are extracted from the resulting HTML.
  • The stylesheets are merged and the rules are parsed by css-parse.
  • document.querySelector

    filters out selectors that are not found in HTML files.
  • The rest of the rules are converted back to CSS.

So yes, it removes non-DOM selectors at runtime. If you have dynamically added selectors, you can force uncss to ignore them by commenting: / * uncss: ignore * / in front of them, like ...

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


SASS Background Study:
To summarize the above:

nex3

: one of the main takeaways for sass, was in google

and worked for dart

. They released dart-sass

(unstable release) as a rewrite in favor of replacement and improvement on Ruby Sass

. This is interesting, as this rewrite also explains the lack of development of the function Ruby Sass

, as well as the need for rewriting. Since the main contributor to the ruby ​​sass port: that is, libsass (the C ++ implementation of Ruby-sass) has left the libsass team, this provides an additional boost to improve sass performance.

Credit:

+1


source







All Articles