Awesome
node-sass-magic-importer
node-sass-magic-importer is a tool to enhance Sass @import
statements.
The node-sass-magic-importer project consists of multiple node-sass custom importers which make it possible to do a lot of fancy things with Sass @import
statements. Some of the highlights are selector and filter imports.
@import '{ .btn as .button } from ~bootstrap';
imports only.btn
selectors and renames them to.button
.@import '[variables, mixins] from menu.scss';
imports only Sass variables (e.g.$menu-height
) and mixins (e.g.@mixin menu-item()
) but no selectors.
Packages
The node-sass-magic-importer repository is managed as a monorepo that is composed of many npm packages.
node-sass-magic-importer
The node-sass-magic-importer package combines the functionality of all the other importers maintained in this package.
node-sass-selector-importer
By using the node-sass-selector-importer it is possible to import only specific selectors from a Sass file. This enables you to take exactly the bits and pieces you really need from huge one size fits all CSS frameworks, instead of having to import the entire framework or at least some component from which you may only need one class.
node-sass-filter-importer
The node-sass-filter-importer package allows you to filter certain types of nodes from a Sass file. That way it is possible to import – for example – only variables of a Sass file. Other possibilities are to only import only mixins or class selectors.
node-sass-glob-importer
Globbing allows pattern matching operators to be used to match multiple files at once. The node-sass-glob-importer allows you to use glob syntax in Sass imports.
node-sass-once-importer
The node-sass-once-importer package changes the Sass import logic to import files only once. If the same file is imported in multiple @import
statements, this package will ignore subsequent imports of the same file.
node-sass-package-importer
To easily import Sass files from packages inside your node_modules
directory the node-sass-package-importer automatically resolves the paths of packages installed with npm.
About
Author
Markus Oberlehner
Website: https://markus.oberlehner.net
Twitter: https://twitter.com/MaOberlehner
PayPal.me: https://paypal.me/maoberlehner
Patreon: https://www.patreon.com/maoberlehner
License
MIT