This package has been deprecated

Author message:

Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

@felix_berlin/sassy-scss

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

• colors
  • hex-to-rgb-values()
  • hex-to-rgb()
• converters
  • px-to-rem()
• lists
  • first-of-list()
  • last-of-list()
• maps
  • map-collect()
• numbers
  • strip-unit()
  • number-invert()
  • random-num()
• strings
  • str-starts-with()
  • str-ends-with()
  • str-contains()
  • str-replace()
  • escape-svg()
• typechecking
  • is-number()
  • is-time()
  • is-duration()
  • is-angle()
  • is-frequency()
  • is-integer()
  • relative-length()
  • absolute-length()
  • is-percentage()
  • is-length()
  • is-resolution()
  • is-position()

Mixins

• basic
  • select-style()
  • target-anchor-offset()
• breakpoint
  • breakpoint()
  • feature()
• element
  • line-on-sides()
  • overlay()
  • list-style-image()
• typo
  • font-smoothing()
  • fluid-typo()
  • icon-font()
  • font-face()

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