@felix_berlin/sassy-scss v1.8.1
Sassy 😜 SCSS
Sassy SCSS is a big collection of SASS mixins and functions.
Whats inside?
Visit https://sassy-scss.kasimir.dev for full documentation.
Functions
Mixins
Installation
npm i @felix_berlin/sassy-scss
Requirements
This project uses the "new" Sass Module system. Therefore your build tool or taskrunner have to support Dart Sass 1.23.0 or above.
Sass support
Sass Compiler | Support |
---|---|
Dart Sass | ✅ |
Lib Sass | ❌ |
Ruby Sass | ⚰️ |
Usage
Import all at once or all individually
Single import of the used functionalities.
Recommended for more precise namespaces.
@use './node_modules/sassy-scss/functions/first-of-list' as fol;
import all functions at once:
@use './node_modules/sassy-scss/functions' as functions;
How to import
@use './node_modules/sassy-scss/mixis/breakpoint' as breakpoint;
With sass-loader
:
@use '~sassy-scss/mixis/breakpoint' as breakpoint;
With webpack mix
:
.sass('resources/assets/styles/app.scss', 'styles', {
sassOptions: {
includePaths: ['./node_modules'],
},
})
@use 'sassy-scss/mixis/breakpoint' as breakpoint;
Override module config
Some of the module comes with "global" config vars and maps (breakpoint mixin). This may be a problem since you can only overwrite once with with()
.
Here is an example how you can deal with it:
Create a new file and load the breakpoint mixin from the node_modules
with the @forward
function. Similar to the @use
function you can overwrite predefined vars with with()
.
// _custom-breakpoints.scss
// Add your own breakpoints
@forward 'sassy-scss/mixins/breakpoint' with (
$lg: 1200px
);
In the rest of your project you don't add the module via node_modules
anymore but load the customized module _external.scss
with @use
.
// _my-module.scss
@use 'custom-breakpoints' as break;
.my-selector {
// lg === 1200px not 1260px
@include break.breakpoint(lg) {
padding: 12px 0 1rem 0;
}
}
Documentation
You can find the documentation at: https://sassy-scss.kasimir.dev
The documentation is updated automatically with each commit on the master branch.
Build the docs locally
Run following command:
npm run sassDoc