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.
source to share
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, sofile="_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:
source to share