@felix_berlin/sassy-scss NPM

Sassy 😜 SCSS

GitHub package.json version GitHub Workflow Status (branch) GitHub code size in bytes npms.io (quality)

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;
  }
}