Sass Extend

Table of Contents

Adds more SCSS super power functions.

This repo will add more functions and adds options not found in the core sass project.

Installation

npm install @fylgja/sass

Since this is a Sass function library it require only usages where it is needed.

So if you need to string replace something.

Then include the specific sass typed function via;

@use "@fylgja/sass/string" as str;

.str-replace {
    content: str.replace("Hello World", "World", "🌍");
}

We advice to use the library with a prefixed @use. Similar to an @use "sass:string".

This package offers the following functions.

Function Name	Type	Description
luminance	color	Calculate the luminance for a color
contrast-ratio	color	Calculate the contrast ratio between two colors
contrast	color	Sets an dark or light color based on the contrast
gray	color	Get a specific gray based an a given precentage
nth-side	list	Extract value based on shorthand sizing property
negative	map	Converters a map with units to a negative units
strip-unit	math	Removes the unit (e.g. px, em, rem) from a value
replace	string	Replace part of a string with new value
url-encode	string	Encode Unsafe urls to safe urls
svg-url	string	Use SVG anywhere as dataUri (inline background)

Noticed a typo or is something unclear? Help us improve this page on GitHub.