sass-styler

3.2.8 • Public • Published

SASS STYLER

NPM Sass Github issues Tests License

Modular scss utility library to build better styles faster

Install

npm i sass-styler

Table of Content

Styler is made up of mixins, functions and variables

Table of Content

Mixins angled-edge Add an angled edge to a container using a generated SVG
angled-tritone-background A tritone angled CSS background
apply Add multiple extends
aspect-ratio-padding The padding trick to keep a container the same ratio in different screen sizes
background-stripes Background gradient stripes from a list of colors
clearfix Prevent elements flowing around floating elements
container Create a width-limited container with side-margin on smaller screens
cover-link Cover a container with a link
declare-map Declare properties via sass maps
elevation Add box shadow based on elevation settings
extend-background Extend the background sideways of a container
flex-grid Create a flexbox grid from the wrapper and direct children elements
hardware-accelerate Turn on the hardware acceleration of the browser for element
hide-text-except-pseudo Hide text within a container but keep pesudo elements visible
hide-visually Visually hide an element
horizontal-list Make a list horizontal
icon-item Align an icon and text next to one another
increment-z-index Increment z-index value for each element in a container
inner-container Set styles for containers without media queries where you use a main and a wrapper element
keyframes Add CSS animation only once
loader Create a dynamic, animated CSS circle loader spinner
media Generate media queries via saved keywords or simplified syntax
menu-icon Generate a menu icon from a single element
menu-icon-close Morph menu icon to a close (x) icon
normalize Normalize with best practices combined from bootstrap, tailwind, etc
object-fit Create object fitted elements
on-circle Mixin to place items on a circle
pipe-list Make a list horizontal and add a pipe separator (border) between the items
position Set position top, right, bottom, left, position, width, height and z-index values
pseudo-with-position Add a pseduo element with position
pseudo Add a pseduo element
replace-context Replace part of the current selector
reset Reset styles
scrollbar Style scrollbars
search-icon Generate a search icon from a single element
search-icon-close Morph search icon to a close (x) icon
select Select common element groups via shorthands
triangle CSS-only triangle
truncate Truncate text in a container
unhide-visually Unhide a previously visually hidden element
unstyled-list Remove list styles
Functions asset Get an asset url prepended by a default base path
best-contrast Get the best contrasting color from a list of colors compared to a base
blacken Mix a color with black
calc-add Add 2 numbers or return calc if they are incompatible
calc-substract Substract 2 numbers or return calc if they are incompatible
cmyk Get CMYK values from a color
color-from Get the color value from a list like border or background
color Return and manipulate color from a palette
c Return and manipulate color from a palette (alias of color)
contrast-balance Change 2 colors contrast ratio by weighted balance(0-100) 0 means only second color is changed, while 100 means only the first one
contrast-between Get the contrast between 2 colors
contrast-ratio-by-name Get a contrast ratio by its official codename
contrast-with Adjust color towards a target color until it reaches a contrast ratio
decimal-round Round a number to specified digits
elevation Return box shadow based on elevation settings
em2px Em to Px conversion
em2rem Change em to rem (units only, no calculations)
emval Get value of a number in ems
ensure-unit Convert a number to another unit
escape-classname Escape string to work as a classname
fallback Fallback for possibly null values
fluid-size Fluid size depending on viewport with minimum and maximum values
get Deeply get a value from a map
grid-column-width Calculate the coluns width from a columns ratio and a gap value
is-between Check if a number is between a min and max value
is-contrasting Check if 2 colors contrast enough
is-property Check whether a property is valid in CSS3
is-pseudo Check whether a pseudo class is valid in CSS3
keyframes-name Get a unique name for a keyframe animation with optional config
long-shadow Return Long shadow
luminance Returns XYZ value to RGB channel
media Get generated media query string via saved keywords or simplified syntax
merge Merge maps recursively
num-to-length Add `$unit` to `$value`
px2em Px to Em calculation
px2rem Px to Rem calculation
pxval Get value of a number in pixels
rem2em Change rem to em (units only, no calculations)
rem2px Rem to Px calculation
remove-nth Remove the $nth value of a $list
remove Remove $keys (deeply) from $map
remval Get value of a number in rems
same-units Check whether 2 numbers have the same units
scale-light Scale lightness by iterations to fix rounding issues
scale-luminance Scale a luminance of a color by a set value
select-after Select all elements after a specific nth value
select-all-out-of-at-least Select all elements if the number of elements in the container is at least a number
select-all-out-of-at-most Select all elements if the number of elements in the container is at most a number
select-all-out-of-between Select all elements if the number of elements in the container is between a min and max number
select-before Select all elements before a specific nth value
select-between Select all elements between a specific first and last nth value
select-even-between Select all even nth elements between a specific first and last nth value
select-even Select all even nth elements
select-except-first-last Select all elements except the first and last
select-except-only-child Select all elements except the only child
select-except Select all elements except a specific nth
select-first-last Select the first and last elements
select-first-of-type Select the first of the type element
select-first-out-of Select first element if the number of elements in the container equals to a number
select-first Select the first element
select-last-of-type Select the last of the type element
select-last-out-of Select last element if the number of elements in the container equals to a number
select-last Select the last element
select-middle Select the middle element
select-nth-between Select all nth elements between a first and a last value
select-nth-both-sides Select nth elements from both sides of the container
select-nth-from Select nth elements from after a value
select-nth Select every nth element
select-odd-between Select all odd nth elements between a specific first and last nth value
select-odd Select all odd nth elements
select-only-child Select element only if it is an only child of its container
select-owl Mingle a list of selectors to go before and after the other adjacently
select Return selectors for common element groups via shorthands
selector-combine Combine 2 CSS selectors
set Recusrively set map values based on keys
sides-bottom Get the bottom value from a list like margin or padding
sides-left Get the left value from a list like margin or padding
sides-right Get the right value from a list like margin or padding
sides-top Get the top value from a list like margin or padding
sides-x Get the right-left value from a list like margin or padding
sides-y Get the top-bottom value from a list like margin or padding
sides Get a map of sides from a value or list (like margin, padding)
size Return a named size
s Return a named size (alias of size)
srgb Returns XYZ value to RGB channel
str-ends-with Check if string ends with a substring
str-replace Replace `$search` with `$replace` in `$string`
str-split Split a string into a list of strings along a delimiter
str-starts-with Check if string starts with a substring
str-to-num Cast a string `$value` into a number
str-trim-end Trim whitespace from the end of a string
str-trim-start Trim whitespace from the beginning of a string
str-trim Trim whitespace off a string
strip-unit Remove units from a number
svg-base64 Base64 encode svg code
svg-url SVG base64 background url based on $svg with optional $fill color
tetrad Get the tetrad pairs of a color
triad Get the triad pairs of a color
unique-id-by-value Generate a unique ID based on passed-in attributes
whiten Mix a color with white
xyz Return an RGB channel processed as XYZ
Variables asset-path The default asset path to prepend
color-palette Named colors palette
media-queries Named shorthands for media queries (values should be full media query strings or a number value) (if a number value, the value will be used as min-width or a calculated value when used as max-width - see examples)
selectors List of selector shorthands
sizes A map of named sizes (each may have one value or a list of values)

Mixins

angled-edge  

Add an angled edge to a container using a generated SVG

@include angled-edge($fill, $height, $location, $hypotenuse, $width, $selector)

Type: mixin

Parameters:

name description type default
fill The color of the angled area Color -
height The height of the angled area Number 50
location Where to put the angle (outside-top, outside-bottom, inside-top, inside-bottom) String outside-top
hypotenuse The hypotenuse of the angled area (upper-left, upper-right, lower-left, lower-right) Srting upper-left
width The width of the angled area Number null
selector The selector the angled area should be generated in String List "&::after"

Requires: get, svg-base64

File source: src/angled-edge.scss


angled-tritone-background  

A tritone angled CSS background

@include angled-tritone-background($base, $color1, $color2, $angle1, $angle2, $position1, $position2)

Type: mixin

Parameters:

name description type default
base The base color Color transparent
color1 The first color Color rgba(#000, 0.1)
color2 The second color Color rgba(#fff, 0.1)
angle1 The angle for the first color Number -20deg
angle2 The angle for the second color Number -110deg
position1 The position of the first color change Number 30%
position2 The position of the second color change Number 30%

File source: src/angled-tritone-background.scss


apply  

Add multiple extends

@include apply($keywords)

Type: mixin

Parameters:

name description type default
keywords CSS utility component ids to apply List String -

Requires: str-split, escape-classname

File source: src/apply.scss


aspect-ratio-padding  

The padding trick to keep a container the same ratio in different screen sizes

@include aspect-ratio-padding($x, $y, $position)

Type: mixin

Parameters:

name description type default
x Width ratio Number 16
y Height raio Number 9
position Position String List relative

File source: src/aspect-ratio-padding.scss


background-stripes  

Background gradient stripes from a list of colors

@include background-stripes($direction, $colors)

Type: mixin

Parameters:

name description type default
direction Gradient direction String Number -
colors List of colors List -

File source: src/background-stripes.scss


clearfix  

Prevent elements flowing around floating elements

@include clearfix($selector)

Type: mixin

Parameters:

name description type default
selector Selector for the clearfix code String "&::after"

File source: src/clearfix.scss


container  

Create a width-limited container with side-margin on smaller screens

@include container($width, $margin)

Type: mixin

Parameters:

name description type default
width The width-limit number -
margin The margin size (on smaller screens) number -

Requires: calc-add

File source: src/container.scss


cover-link  

Cover a container with a link

@include cover-link($selector, $position, $z-index)

Type: mixin

Parameters:

name description type default
selector The cover to be generated to String List "a::before"
position The position of the parent container String relative
z-index The z-indx value of the cover Number 2

Requires: position

File source: src/cover-link.scss


declare-map  

Declare properties via sass maps

@include declare-map($map)

Example:

@include declare-map((color: red, margin: 0));                       /* color: red; margin: 0; */
@include declare-map((color: red, "&:hover": (color: blue)));         /* color: red; &:hover { color: blue; } */
@include declare-map((color: red, "&:hover, &:focus": (color: blue))); /* color: red; &:hover, &:focus { color: blue; } */

Type: mixin

Parameters:

name description type default
map Property declaration Map ()

Requires: str-replace

File source: src/declare-map.scss


elevation  

Add box shadow based on elevation settings

@include elevation($level, $color)

Type: mixin

Parameters:

name description type default
level Level of elevation Number 1
color Shadow color Color rgba(0, 0, 0, 0.1)

Requires: elevation

File source: src/elevation.scss


extend-background  

Extend the background sideways of a container

@include extend-background($background, $position, $z-index)

Type: mixin

Parameters:

name description type default
background The background value Color String -
position The position value String relative
z-index The Z-index value Number 1

File source: src/extend-background.scss


flex-grid  

Create a flexbox grid from the wrapper and direct children elements

@include flex-grid($columns, $gap, $gap, $justify-content, $align-items, $selector)

Type: mixin

Parameters:

name description type default
columns The columns ratio (x of y) List String 1 of 2
gap The gap Number 0
gap The vertical gap Number 0
justify-content The justify content value String center
align-items The align items value String stretch
selector The child selector String List ">*"

Requires: selector-combine, grid-column-width

File source: src/flex-grid.scss


hardware-accelerate  

Turn on the hardware acceleration of the browser for element

@include hardware-accelerate($perspective, $hide-backface)

Type: mixin

Parameters:

name description type default
perspective The perspective value Number 1000
hide-backface Hide backface visibility Boolean true

File source: src/hardware-accelerate.scss


hide-text-except-pseudo  

Hide text within a container but keep pesudo elements visible

@include hide-text-except-pseudo($font-size, $color, $line-height, $font-family, $text-align)

Type: mixin

Parameters:

name description type default
font-size Font size of the pseudo elements Number 1rem
color Color of the pseudo elements Color null
line-height Line height of the pseudo elements Number null
font-family Font family of the pseudo elements String List null
text-align Text alignment of the pseudo elements String null

File source: src/hide-text-except-pseudo.scss


hide-visually  

Visually hide an element

@include hide-visually($position, $overflow, $visibility, $opacity, $left)

Type: mixin

Parameters:

name description type default
position Position value String absolute
overflow Overflow value String hidden
visibility Visibility value String hidden
opacity Opacity value Number 0.00001
left Left property Number -999999px

File source: src/hide-visually.scss


horizontal-list  

Make a list horizontal

@include horizontal-list($gap, $justify-content, $align-items, $flex-wrap)

Type: mixin

Parameters:

name description type default
gap The gap between items Number null
justify-content The justify-content value String null
align-items The align-items value String null
flex-wrap The flex-wrap value String null

File source: src/horizontal-list.scss


icon-item  

Align an icon and text next to one another

@include icon-item($icon-size, $gap, $side, $justify-content, $align-items, $align-icon)

Type: mixin

Parameters:

name description type default
icon-size Icon size (width) Size 1em
gap Gap between icon and text Size null
side Whether the icon is on the left or the right side String left
justify-content Horizontal alignment of icon and text String null
align-items Vertical alignment of icon and text String null
align-icon Vertically align the icon in a different way String null

File source: src/icon-item.scss


increment-z-index  

Increment z-index value for each element in a container

@include increment-z-index($from, $to, $index, $selector)

Type: mixin

Parameters:

name description type default
from Starting element index String -
to Ending element index String -
index Starting z-index Number 1
selector The selector String List "&"

File source: src/increment-z-index.scss


inner-container  

Set styles for containers without media queries where you use a main and a wrapper element

@include inner-container($width, $padding, $inner-selector)

Type: mixin

Parameters:

name description type default
width Max-width value Number -
padding Padding value Number -
inner-selector The inner element selector within the wrapper String List ">*"

File source: src/inner-container.scss


keyframes  

Add CSS animation only once

@include keyframes($name)

Type: mixin

Parameters:

name description type default
name The animation name String -

Requires: merge, _keyframes

File source: src/keyframes.scss


loader  

Create a dynamic, animated CSS circle loader spinner

@include loader($color, $bg, $size, $width, $animation-speed, $inner-opacity, $inner-color)

Type: mixin

Parameters:

name description type default
color The spinner circle segment color Color rgba(#000, 0.5)
bg The spinner circle background Color rgba(#000, 0.2)
size The size of the circle Number 1.5rem
width The width of the circle line Number 2px
animation-speed Animation speed Number 1s
inner-opacity The opacity of the elements in the container Number 0.5
inner-color Set the container font color Color null

Requires: pseudo-with-position, keyframes

File source: src/loader.scss


media  

Generate media queries via saved keywords or simplified syntax

@include media($query...)

Example:

@include media(1024px);                    /* @media (min-width: 1024px) */
@include media(800px 1024px);              /* @media (min-width: 800px) and (max-width: 1024px) */
@include media(max 1024px);                /* @media (max-width: 1024px) */
@include media(620px, max 1024px);         /* @media (min-width: 620px), (max-width: 1024px) */
$media-queries: (
  large: 1024px,
  wide: 75rem,
  dark: "(prefers-color-scheme: dark)"
);
@include media(large);                     /* @media (min-width: 1024px) */
@include media(max large);                 /* @media (max-width: 1023px) */
@include media(wide);                      /* @media (min-width: 75rem) */
@include media(max wide);                  /* @media (max-width: 74.999rem) */
@include media(large wide);                /* @media (min-width: 1024px) and (max-width: 74.999rem) */
@include media(dark large wide);           /* @media (prefers-color-scheme: dark) and (min-width: 1024px) and (max-width: 74.999rem) */

Type: mixin

Parameters:

name description type default
query... Number value for min width, or number value preceeded by "max" for max width, or 2 number values for min and max width (alternatively keyword from $media-queries instead of any number value) List -

Requires: media

File source: src/media.scss


menu-icon  

Generate a menu icon from a single element

@include menu-icon($color, $border-radius, $width, $height, $gutter, $transition-duration)

Type: mixin

Parameters:

name description type default
color Color of the menu lines Color currentColor
border-radius Menu line border radius Number 0
width Width of the menu icon lines Number 1em
height Height of an individual menu icon line Number 0.125em
gutter Gutter between menu lines Number 0.3125em
transition-duration Transition speed for animations Number 0.3s

Requires: calc-add, calc-substract

File source: src/menu-icon.scss


menu-icon-close  

Morph menu icon to a close (x) icon

@include menu-icon-close($color)

Type: mixin

Parameters:

name description type default
color Overwrite icon line color (use auto to keep existing color) Color auto

Requires: calc-add, calc-substract

File source: src/menu-icon.scss


normalize  

Normalize with best practices combined from bootstrap, tailwind, etc

@include normalize($root)

Type: mixin

Parameters:

name description type default
root Whether the normalize should run for the root styles. Boolean true

Requires: media

File source: src/normalize.scss


object-fit  

Create object fitted elements

@include object-fit($object-fit, $object-position, $position, $width, $height)

Type: mixin

Parameters:

name description type default
object-fit The object fit String cover
object-position The object position Number List 50% 50%
position Element position String null
width The element width Number 100%
height The element height Number 100%

File source: src/object-fit.scss


on-circle  

Mixin to place items on a circle

@include on-circle($item-count, $circle-size, $item-size)

Type: mixin

Parameters:

name description type default
item-count Number of items on the circle Integer -
circle-size Large circle size Length -
item-size Single item size Length -

File source: src/on-circle.scss


pipe-list  

Make a list horizontal and add a pipe separator (border) between the items

@include pipe-list($gap, $border, $justify-content, $align-items, $flex-wrap)

Type: mixin

Parameters:

name description type default
gap The gap between items Number null
border The border (the pipe) styles List null
justify-content The justify-content value String null
align-items The align-items value String null
flex-wrap The flex-wrap value String null

File source: src/pipe-list.scss


position  

Set position top, right, bottom, left, position, width, height and z-index values

@include position($top, $right, $bottom, $left, $position, $width, $height, $z-index)

Type: mixin

Parameters:

name description type default
top Top property Number auto
right Right property Number auto
bottom Bottom property Number auto
left Left property Number auto
position Position value String static
width Width value String static
height Height value String static
z-index Z-index value String static

File source: src/position.scss


pseudo-with-position  

Add a pseduo element with position

@include pseudo-with-position($top, $right, $bottom, $left, $position, $width, $height, $z-index, $content, $display, $selector)

Type: mixin

Parameters:

name description type default
top Top property Number auto
right Right property Number auto
bottom Bottom property Number auto
left Left property Number auto
position Position value String static
width Width value String static
height Height value String static
z-index Z-index value String static
content The content value String ""
display The display value String block
selector The selector String List "&"

Requires: pseudo, position

File source: src/pseudo-with-position.scss


pseudo  

Add a pseduo element

@include pseudo($content, $display, $selector)

Type: mixin

Parameters:

name description type default
content The content value String ""
display The display value String block
selector The selector String List "&"

File source: src/pseudo.scss


replace-context  

Replace part of the current selector

@include replace-context($from, $to, $select-after)

Type: mixin

Parameters:

name description type default
from Selector part to be changed String -
to Replacement of the selector part String -
select-after Append additional selectors String null

File source: src/replace-context.scss


reset  

Reset styles

@include reset

Type: mixin

File source: src/reset.scss


scrollbar  

Style scrollbars

@include scrollbar($width, $track-color, $thumb-color, $thumb-hover-color, $scrollbar-width)

Type: mixin

Parameters:

name description type default
width The width of the scrollbar (webkit only) Number -
track-color Color of the scrollbar track Color -
thumb-color Color of the scrollbar handle Color -
thumb-hover-color Color of the scrollbar handle when hovered Color -
scrollbar-width The width of the scrollbar (moz) Color thin

File source: src/scrollbar.scss


search-icon  

Generate a search icon from a single element

@include search-icon($color, $border-radius, $size, $thickness, $transition-duration)

Type: mixin

Parameters:

name description type default
color Color of the menu lines Color currentColor
border-radius Menu line border radius Number 0
size Size of the icon altogether Number 1em
thickness Thickness of an individual icon line Number 0.125em
transition-duration Transition speed for animations Number 0.3s

File source: src/search-icon.scss


search-icon-close  

Morph search icon to a close (x) icon

@include search-icon-close($color)

Type: mixin

Parameters:

name description type default
color Overwrite icon line color (use auto to keep existing color) Color auto

File source: src/search-icon.scss


select  

Select common element groups via shorthands

@include select($key)

Type: mixin

Parameters:

name description type default
key Selector group key Number -

Requires: select

File source: src/select.scss


triangle  

CSS-only triangle

@include triangle($direction, $color, $size, $selector)

Type: mixin

Parameters:

name description type default
direction The triangle pointing direction String right
color The triangle color Color #000
size The width and height or size of the triangle Number List 0.5rem 0.75rem
selector The triangle selector String List "&::after"

File source: src/triangle.scss


truncate  

Truncate text in a container

@include truncate($width)

Type: mixin

Parameters:

name description type default
width The max-width of the container Number 100%

File source: src/truncate.scss


unhide-visually  

Unhide a previously visually hidden element

@include unhide-visually($position, $overflow, $visibility, $opacity, $left)

Type: mixin

Parameters:

name description type default
position Position value String static
overflow Overflow value String visible
visibility Visibility value String visible
opacity Opacity value Number 1
left Left property Number auto

File source: src/unhide-visually.scss


unstyled-list  

Remove list styles

@include unstyled-list

Type: mixin

File source: src/unstyled-list.scss


Functions

asset  

Get an asset url prepended by a default base path

asset($file)

Type: function

Parameters:

name description type default
file The file url relative to the base String -

Requires: asset-path

File source: src/asset.scss

Source
@function asset($file) {
    @return url($asset-path + $file);
}

best-contrast  

Get the best contrasting color from a list of colors compared to a base

best-contrast($base, $colors, $tolerance)

Type: function

Parameters:

name description type default
base Base color Color -
colors Contrasting candidates (default: #fff #000) Color List #fff, #000
tolerance Tolerance of checks Number 0

Requires: contrast-between

File source: src/best-contrast.scss

Source
@function best-contrast($base, $colors, $tolerance) {
    $best: list.nth($colors, 1);
    $contrast: contrast-between($base, $best);
    @for $i from 2 through list.length($colors) {
        $current: list.nth($colors, $i);
        $current-contrast: contrast-between($base, $current);
        @if $current-contrast - $contrast > $tolerance {
            $best: $current;
            $contrast: $current-contrast;
        }
    }
    @return $best;
}

blacken  

Mix a color with black

blacken($color, $ratio)

Type: function

Parameters:

name description type default
color Color Color -
ratio Ratio Number 50%

File source: src/blacken.scss

Source
@function blacken($color, $ratio) {
    @return color.mix(#000, $color, $ratio);
}

calc-add  

Add 2 numbers or return calc if they are incompatible

calc-add($left, $right, $ensure-unit)

Type: function

Parameters:

name description type default
left Number on the left of the operation Number -
right Number on the right of the operation Number -
ensure-unit Try to convert numbers so that they are compatible Number false

Requires: ensure-unit

File source: src/calc-add.scss

Source
@function calc-add($left, $right, $ensure-unit) {
    @if math.is-unitless($left) and math.is-unitless($right) == false {
        $left: ensure-unit($left, math.unit($right));
    }
    @if math.is-unitless($right) and math.is-unitless($left) == false {
        $right: ensure-unit($right, math.unit($left));
    }
    @if math.compatible($left, $right) {
        @return if(
            $ensure-unit,
            ensure-unit($left, $ensure-unit) + ensure-unit($right, $ensure-unit),
            $left + $right
        );
    }
    @if $ensure-unit and
        list.index(px em rem, math.unit($left)) and
        list.index(px em rem, math.unit($right))
    {
        $left: ensure-unit($left, $ensure-unit);
        $right: ensure-unit($right, $ensure-unit);
        @return $left + $right;
    }
    @return calc(#{$left} + #{$right});
}

calc-substract  

Substract 2 numbers or return calc if they are incompatible

calc-substract($left, $right, $ensure-unit)

Type: function

Parameters:

name description type default
left Number on the left of the operation Number -
right Number on the right of the operation Number -
ensure-unit Try to convert numbers so that they are compatible Number false

Requires: ensure-unit

File source: src/calc-substract.scss

Source
@function calc-substract($left, $right, $ensure-unit) {
    @if math.is-unitless($left) and math.is-unitless($right) == false {
        $left: ensure-unit($left, math.unit($right));
    }
    @if math.is-unitless($right) and math.is-unitless($left) == false {
        $right: ensure-unit($right, math.unit($left));
    }
    @if math.compatible($left, $right) {
        @return if(
            $ensure-unit,
            ensure-unit($left, $ensure-unit) - ensure-unit($right, $ensure-unit),
            $left - $right
        );
    }
    @if $ensure-unit and
        list.index(px em rem, math.unit($left)) and
        list.index(px em rem, math.unit($right))
    {
        $left: ensure-unit($left, $ensure-unit);
        $right: ensure-unit($right, $ensure-unit);
        @return $left - $right;
    }
    @return calc(#{$left} - #{$right});
}

cmyk  

Get CMYK values from a color

cmyk($color)

Type: function

Parameters:

name description type default
color base color Color -

File source: src/cmyk.scss

Source
@function cmyk($color) {
    $black: 1 - math.div(math.max(color.red($color), color.green($color), color.blue($color)), 255);
    $cyan: if($black < 1, 1 - math.div(math.div(color.red($color), 255), (1 - $black)), 0);
    $magenta: if($black < 1, 1 - math.div(math.div(color.green($color), 255), (1 - $black)), 0);
    $yellow: if($black < 1, 1 - math.div(math.div(color.blue($color), 255), (1 - $black)), 0);

    @return (
        c: $cyan,
        cyan: $cyan,
        m: $magenta,
        magenta: $magenta,
        y: $yellow,
        yellow: $yellow,
        k: $black,
        black: $black
    );
}

color-from  

Get the color value from a list like border or background

color-from($value)

Type: function

Parameters:

name description type default
value The list value Color List -

File source: src/color-from.scss

Source
@function color-from($value) {
    @if meta.type-of($value) == color {
        @return $value;
    }
    @each $v in $value {
        @if meta.type-of($v) == color {
            @return $v;
        }
    }
    @return null;
}

color  

Return and manipulate color from a palette

color($args)

Example:

$color: color(red);                          /* #dc2626 */
$color: color(red 500);                      /* #ef4444 */
$color: color(red contrast);                 /* white - best contrasting with #dc2626 out of black or white */
$primary: ( default: red, 800: darkred );
$color: color($primary);                     /* red */
$color: color($primary 800);                 /* darkred */

Type: function

Parameters:

name description type default
args Color or palette key, and optionally Shade level, and optionally "contrast" "triad" "triad-2" "tetrad" "tetrad-2" or "tetrad-3" for manipulation List Color -

Requires: get, triad, tetrad, best-contrast, c, color-palette

File source: src/color.scss

Source
@function color($args) {
    $color: null;
    $color-map: null;
    $level: null;
    $contrast: null;
    $triad: null;
    $tetrad: null;
    $raw: false;
    $black-and-white: null;
    @if meta.type-of($options) != list {
        $options: ($options,);
    }
    @each $option in $options {
        @if meta.type-of($option) == color {
            $color: $option;
        }
        @if map.has-key($color-palette, $option) {
            $color-map: map.get($color-palette, $option);
            @if meta.type-of($color-map) == color {
                $color: $color-map;
                $color-map: null;
            }
        }
        @if meta.type-of($option) == number {
            $level: $option;
        }
        @if meta.type-of($option) == map {
            $color-map: $option;
        }
        @if $option == contrast {
            $contrast: true;
        }
        @if $option == triad {
            $triad: 1;
        }
        @if $option == triad-2 {
            $triad: 2;
        }
        @if $option == tetrad {
            $tetrad: 1;
        }
        @if $option == tetrad-2 {
            $tetrad: 2;
        }
        @if $option == tetrad-3 {
            $tetrad: 3;
        }
        @if $option == raw {
            $raw: true;
        }
        @if meta.type-of($option) == list and list.length($option) == 2 {
            $black-and-white: $option;
        }
    }
    @if $color-map and $raw {
        @return $color-map;
    }
    @if $color-map and $level and map.has-key($color-map, $level) {
        $color: map.get($color-map, $level);
        $color-map: null;
        $level: null;
    }
    @if $color-map and map.has-key($color-map, default) {
        $color: map.get($color-map, default);
        $color-map: null;
    }
    @if $color-map {
        $key: if(map.has-key($color-map, 500), 500, list.nth(map.keys($color-map), 1));
        $color: map.get($color-map, $key);
        $color-map: null;
    }
    @if meta.type-of($color) != color {
        @return $color;
    }
    @if $level {
        $level: if($level > 1, math.div($level, 1000), $level);
        $color: color.change($color, $lightness: (1% - $level) * 100);
    }
    @if $triad {
        $color: triad($color, $triad);
    }
    @if $tetrad {
        $color: tetrad($color, $tetrad);
    }
    @if $contrast {
        $color: best-contrast($color, if($black-and-white, $black-and-white, c(black) c(white)));
    }
    @return $color;
}

c  

Return and manipulate color from a palette

c($args)

Type: function

Alias of: color

Parameters:

name description type default
args Color or palette key, and optionally Shade level, and optionally "contrast" "triad" "triad 2" "tetrad" "tetrad 2" or "tetrad 3" for manipulation List Color String Number -

Requires: color

File source: src/color.scss

Source
@function c($args) {
    @return color($options);
}

contrast-balance  

Change 2 colors contrast ratio by weighted balance(0-100) 0 means only second color is changed, while 100 means only the first one

contrast-balance($color1, $color2, $ratio, $balance)

Type: function

Parameters:

name description type default
color1 Color 1 Color -
color2 Color 2 Color -
ratio Name or value of contrast ratio Number String "AA"
balance Balance Number 50%

Requires: contrast-with, is-contrasting, is-between, luminance

File source: src/contrast-balance.scss

Source
@function contrast-balance($color1, $color2, $ratio, $balance) {
    $fixed1: contrast-with($color1, $color2, $ratio);
    $fixed2: contrast-with($color2, $color1, $ratio);
    $color1: color.mix($fixed1, $color1, $balance);
    $color2: color.mix($fixed2, $color2, $balance);
    @if not is-contrasting($color1, $color2, $ratio) {
        @if not is-between(luminance($fixed2), 0.00002, 0.99936) {
            $color1: contrast-with($color1, $color2, $ratio);
        }
        @if not is-between(luminance($fixed1), 0.00002, 0.99936) {
            $color2: contrast-with($color2, $color1, $ratio);
        }
    }
    @return $color1, $color2;
}

contrast-between  

Get the contrast between 2 colors

contrast-between($color1, $color2)

Type: function

Parameters:

name description type default
color1 Color 1 Color -
color2 Color 2 Color -

Requires: luminance

File source: src/contrast-between.scss

Source
@function contrast-between($color1, $color2) {
    $lum1: luminance($color1);
    $lum2: luminance($color2);
    @return math.div((math.max($lum1, $lum2) + 0.05), (math.min($lum1, $lum2)) + 0.05);
}

contrast-ratio-by-name  

Get a contrast ratio by its official codename

contrast-ratio-by-name($ratio)

Type: function

Parameters:

name description type default
ratio Ratio String -

File source: src/contrast-ratio-by-name.scss

Source
@function contrast-ratio-by-name($ratio) {
    @if $ratio == "AA" or $ratio == "AAALG" {
        @return 4.5;
    } @else if $ratio == "AALG" {
        @return 3;
    } @else if $ratio == "AAA" {
        @return 7;
    }
    @return $ratio;
}

contrast-with  

Adjust color towards a target color until it reaches a contrast ratio

contrast-with($color, $target, $ratio, $iterations)

Type: function

Parameters:

name description type default
color Color Color -
target Target color Color #fff
ratio Contrast ratio String Number "AA"
iterations Iteration count for checking Number 5

Requires: contrast-ratio-by-name, is-contrasting, luminance, scale-luminance, scale-light

File source: src/contrast-with.scss

Source
@function contrast-with($color, $target, $ratio, $iterations) {
    $ratio: contrast-ratio-by-name($ratio);
    @if is-contrasting($color, $target, $ratio) == false {
        $luminance: math.clamp(luminance($color), 0, 1);
        $target-luminance: math.clamp(luminance($target), 0, 1);
        $operation: "";
        @if $luminance == $target-luminance {
            @if $luminance > 0.5 {
                $color: color.darken($color, 1%);
                $luminance: luminance($color);
            } @else {
                $color: color.adjust($color, $lightness: 1%);
                $luminance: luminance($color);
            }
        }
        @if math.max($luminance, $target-luminance) == $luminance {
            $target-luminance: (($target-luminance + 0.05) * $ratio - 0.05);
            $operation: lighten;
        } @else {
            $target-luminance: math.div(($target-luminance + 0.05), $ratio) - 0.05;
            $operation: darken;
        }
        @if $target-luminance >= 1 {
            @return #fff;
        } @else if $target-luminance <= 0 {
            @return #000;
        } @else {
            $color: scale-luminance($color, $target-luminance);
            $color: scale-light(
                $color,
                $target,
                $ratio,
                $operation,
                $iterations
            );
        }
    }
    @return $color;
}

decimal-round  

Round a number to specified digits

decimal-round($number, $digits, $mode)

Example:

$result: decimal-round(0.333);    /* 0 */
$result: decimal-round(0.333, 1); /* 0.3 */
$result: decimal-round(0.333, 2); /* 0.33 */
$result: decimal-round(0.666);    /* 1 */
$result: decimal-round(0.666, 1); /* 0.7 */
$result: decimal-round(0.666, 2); /* 0.67 */

Type: function

Parameters:

name description type default
number The base number Number -
digits Digits to output Number 0
mode How to round the number String round

File source: src/decimal-round.scss

Source
@function decimal-round($number, $digits, $mode) {
    $n: 1;
    @if meta.type-of($number) != number {
        @return $number;
    }
    @if $digits > 0 {
        @for $i from 1 through $digits {
            $n: $n * 10;
        }
    }
    @if $mode == round {
        @return math.div(math.round($number * $n), $n);
    } @else if $mode == ceil {
        @return math.div(math.ceil($number * $n), $n);
    } @else if $mode == floor {
        @return math.div(math.floor($number * $n), $n);
    }
    @return $number;
}

elevation  

Return box shadow based on elevation settings

elevation($level, $color)

Type: function

Parameters:

name description type default
level Level of elevation Number 1
color Shadow color Color rgba(0, 0, 0, 0.1)

File source: src/elevation.scss

Source
@function elevation($level, $color) {
	@return 0 #{$level}px #{2 * $level + 1}px #{if($level > 1, #{$level - 1}px, null)} #{$color};
}

em2px  

Em to Px conversion

em2px($em, $default)

Type: function

Parameters:

name description type default
em Size value Number -
default Set a default font size (fallback to global variable $font-size) Number null

Requires: strip-unit, str-to-num

File source: src/em2px.scss

Source
@function em2px($em, $default) {
    $default: if(
        $default,
        $default,
        if(meta.global-variable-exists("font-size"), $font-size, 16px)
    );
    @if $default and math.unit($default) == px {
        @return strip-unit($em) * $default;
    }
    @return str-to-num($em);
}

em2rem  

Change em to rem (units only, no calculations)

em2rem($em)

Type: function

Parameters:

name description type default
em Size value Number -

Requires: str-to-num, strip-unit

File source: src/em2rem.scss

Source
@function em2rem($em) {
    @return str-to-num(string.unquote(strip-unit($em) + "rem"));
}

emval  

Get value of a number in ems

emval($value, $default)

Type: function

Parameters:

name description type default
value Size value in px, em or rem Number -
default Set a default font size (fallback to global variable $font-size) Number null

Requires: rem2em, px2em

File source: src/emval.scss

Source
@function emval($value, $default) {
    @if math.unit($value) == "em" {
        @return $value;
    }
    @if math.unit($value) == "rem" {
        @return rem2em($value);
    }
    @if math.unit($value) == "px" {
        @return px2em($value, $default);
    }
    @return 0;
}

ensure-unit  

Convert a number to another unit

ensure-unit($num, $unit, $default)

Type: function

Parameters:

name description type default
num Size value Number -
unit The required unit String -
default Set a default font size (fallback to global variable $font-size) Number null

Requires: rem2px, em2rem, rem2em, px2em, px2rem, num-to-length, strip-unit

File source: src/ensure-unit.scss

Source
@function ensure-unit($num, $unit, $default) {
    $num-unit: math.unit($num);
    @if $num-unit == $unit {
        @return $num;
    }
    $default: if(
        $default,
        $default,
        if(meta.global-variable-exists("font-size"), $font-size, 16px)
    );
    @if $num-unit == em and $unit == px {
        @return rem2px($num, $default);
    }
    @if $num-unit == em and $unit == rem {
        @return em2rem($num);
    }
    @if $num-unit == rem and $unit == em {
        @return rem2em($num);
    }
    @if $num-unit == rem and $unit == px {
        @return rem2px($num, $default);
    }
    @if $num-unit == px and $unit == em {
        @return px2em($num, $default);
    }
    @if $num-unit == px and $unit == rem {
        @return px2rem($num, $default);
    }
    @return num-to-length(strip-unit($num), $unit);
}

escape-classname  

Escape string to work as a classname

escape-classname($classname)

Type: function

Parameters:

name description type default
classname The classname to escape String -

Requires: str-replace

File source: src/escape-classname.scss

Source
@function escape-classname($classname) {
    $starts-with-dot: false;
    @if string.index($classname, ".") == 1 {
        $starts-with-dot: true;
        $classname: string.slice($classname, 2);
    }
    $classname: str-replace($classname, ".", "\\.");
    $classname: str-replace($classname, ":", "\\:");
    $classname: str-replace($classname, "/", "\\/");
    $classname: str-replace($classname, " ", "-");
    @if $starts-with-dot {
        $classname: "." + $classname;
    }
    @return $classname;
}

fallback  

Fallback for possibly null values

fallback($values...)

Type: function

Parameters:

name description type default
values... Values List -

File source: src/fallback.scss

Source
@function fallback($values...) {
    $value: null;
    @each $v in $values {
        @if $v {
            @return $v;
        }
    }
    @return $value;
}

fluid-size  

Fluid size depending on viewport with minimum and maximum values

fluid-size($min-size, $min-viewport, $max-size, $max-viewport, $clamp, $multiplier, $default-font-size, $viewport-unit)

Type: function

Parameters:

name description type default
min-size Minimum size Number -
min-viewport Minimum viewport size Number -
max-size Maximum size Number -
max-viewport Maximum viewport size Number -
clamp Whether to use clamping or just return the fluid calculation Boolean true
multiplier An optional multiplier to apply to the fluid calculation, can be a unitless number or a css variable Boolean null
default-font-size The default root font-size Number null
viewport-unit The viewport width or height unit to base the calculation on Number 100vw

Requires: strip-unit

File source: src/fluid-size.scss

Source
@function fluid-size($min-size, $min-viewport, $max-size, $max-viewport, $clamp, $multiplier, $default-font-size, $viewport-unit) {
    $multiplier-mode: if($multiplier, if(meta.type-of($multiplier) == number and math.is-unitless($multiplier), 'number', 'var'), false);
    $units: if($units == px, pxval, if($units == em, emval, if($units == rem, remval, null)));
    $size-fn: meta.get-function(if($units, $units, if(math.unit($max-size) == px, pxval, if(math.unit($max-size) == em and $multiplier-mode != 'var', emval, remval))));
    $viewport-fn: meta.get-function(if($units, $units, if(math.unit($max-viewport) == px, pxval, remval)));
    $min-size: meta.call($size-fn, $min-size, $default-font-size);
    $max-size: meta.call($size-fn, $max-size, $default-font-size);
    $min-viewport: meta.call($viewport-fn, $min-viewport, $default-font-size);
    $max-viewport: meta.call($viewport-fn, $max-viewport, $default-font-size);
    $min-size-viewport: meta.call($viewport-fn, $min-size, $default-font-size);
    $max-size-viewport: meta.call($viewport-fn, $max-size, $default-font-size);
    $calc: "#{$min-size} + #{strip-unit($max-size-viewport - $min-size-viewport)} * (#{$viewport-unit} - #{$min-viewport}) / #{strip-unit($max-viewport - $min-viewport)}";
    @if $multiplier {
        $min-size: if($multiplier-mode == 'number', $multiplier * $min-size, "calc(#{$multiplier} * #{$min-size})");
        $max-size: if($multiplier-mode == 'number', $multiplier * $max-size, "calc(#{$multiplier} * #{$max-size})");
        $calc: "#{$multiplier} * (#{$calc})";
    }
    @return string.unquote(if($clamp, "clamp(#{$min-size}, calc(#{$calc}), #{$max-size})", "calc(#{$calc})"));
}

get  

Deeply get a value from a map

get($map, $keys, $fallback)

Type: function

Parameters:

name description type default
map The map Map -
keys The key or list of keys (if lookup is supposed to go deeper) List String -
fallback A fallback value if the key is not found * null

File source: src/get.scss

Source
@function get($map, $keys, $fallback) {
    @each $key in $keys {
        @if meta.type-of($map) != map or ( not map.has-key($map, $key) and not map.has-key($map, "#{$key}") ) {
            @return $fallback;
        } @else {
            $map: if(map.get($map, $key), map.get($map, $key), map.get($map, "#{$key}"));
        }
    }
    @return $map;
}

grid-column-width  

Calculate the coluns width from a columns ratio and a gap value

grid-column-width($columns, $gap)

Type: function

Parameters:

name description type default
columns The columns ratio (x of y) List String 1 of 2
gap The gap value Number 0

File source: src/grid-column-width.scss

Source
@function grid-column-width($columns, $gap) {
    $col: list.nth($columns, 1);
    $of: list.nth($columns, 3);
    $width: auto;
    @if $col == $of {
        @return 100%;
    }
    $colof: math.div(math.round(math.div($col, $of) * 10000), 10000);
    @if math.unit($gap) == "%" or math.unit($gap) == "" {
        $width: 99.99% * $colof - ($gap - $gap * math.div($col, $of));
    } @else {
        $width: calc(#{99.99% * $colof} - #{$gap - $gap * $colof});
    }
    @return $width;
}

is-between  

Check if a number is between a min and max value

is-between($value, $min, $max)

Example:

$result: is-between(1);         /* false */
$result: is-between(-1);        /* false */
$result: is-between(7, 3, 5);   /* false */
$result: is-between(15, 0, 10); /* false */
$result: is-between(6, 0, 10);  /* true */

Type: function

Parameters:

name description type default
value The value to constrain Number -
min The minimum value Number 0.0001
max The maximum value Number 0.9999

File source: src/is-between.scss

Source
@function is-between($value, $min, $max) {
    @return if($value >= $min and $value <= $max, true, false);
}

is-contrasting  

Check if 2 colors contrast enough

is-contrasting($color1, $color2, $ratio)

Type: function

Parameters:

name description type default
color1 Color 1 Color -
color2 Color 2 Color -
ratio Ratio codename String "AA"

Requires: contrast-ratio-by-name, contrast-between

File source: src/is-contrasting.scss

Source
@function is-contrasting($color1, $color2, $ratio) {
    $ratio: contrast-ratio-by-name($ratio);
    @return if(contrast-between($color1, $color2) >= $ratio, true, false);
}

is-property  

Check whether a property is valid in CSS3

is-property($property)

Type: function

Parameters:

name description type default
property The property String -

Requires: _properties

File source: src/is-property.scss

Source
@function is-property($property) {
    @if meta.type-of($property) != string {
        @return false;
    }
    @if list.index($_properties, $property) {
        @return true;
    }
    @if string.index($property, "--") == 1 or string.index($property, "-webkit-") == 1 or string.index($property, "-moz-") == 1 or string.index($property, "-ms-") == 1 or string.index($property, "-o-") == 1 {
        @return true;
    }
    @return false;
}

is-pseudo  

Check whether a pseudo class is valid in CSS3

is-pseudo($pseudo, $string)

Type: function

Parameters:

name description type default
pseudo The state String -
string Whether to check it strictly Boolean false

Requires: _pseudo, _pseudo-parameters

File source: src/is-pseudo.scss

Source
@function is-pseudo($pseudo, $string) {
    @if $strict and string.index($pseudo, ":") != 1 {
        @return false;
    }
    $pseudo: if(string.index($pseudo, ":") == 1, string.slice($pseudo, 2), $pseudo);
    $pseudo: if(string.index($pseudo, ":") == 1, string.slice($pseudo, 2), $pseudo);
    @if list.index($_pseudo, $pseudo) {
        @return true;
    }
    @each $p in $_pseudo-parameters {
        @if string.index($pseudo, $p) == 1 {
            @return true;
        }
    }
    @return false;
}

keyframes-name  

Get a unique name for a keyframe animation with optional config

keyframes-name($name, $config)

Type: function

Parameters:

name description type default
name The animation name String -
config Configuration Mixed -

Requires: unique-id-by-value

File source: src/keyframes-name.scss

Source
@function keyframes-name($name, $config) {
    @if not $config {
        @return $name;
    }
    @return "#{$name}-#{unique-id-by-value($name, $config)}";
}

long-shadow  

Return Long shadow

long-shadow($color, $length)

Type: function

Parameters:

name description type default
color The color of the shadow Color -
length The color of the shadow Color 200

File source: src/long-shadow.scss

Source
@function long-shadow($color, $length) {
    $val: 0 0 $color;

    @for $i from 1 through $length {
        $val: #{$val}, #{$i}px #{$i}px #{$color};
    }

    @return $val;
}

luminance  

Returns XYZ value to RGB channel

luminance($color)

Type: function

Parameters:

name description type default
color Color Color -

Requires: xyz

File source: src/luminance.scss

Source
@function luminance($color) {
    $red: xyz(color.red($color));
    $green: xyz(color.green($color));
    $blue: xyz(color.blue($color));
    @return $red * 0.2126 + $green * 0.7152 + $blue * 0.0722;
}

media  

Get generated media query string via saved keywords or simplified syntax

media($query...)

Type: function

Parameters:

name description type default
query... Number value for min width, or number value preceeded by "max" for max width, or 2 number values for min and max width (alternatively keyword from $media-queries instead of any number value) List -

Requires: _media-parse-phrases, _media-parse-phrase

File source: src/media.scss

Source
@function media($query...) {
    $is-list: if(list.length($query) > 1, true, false);
    $query: if($is-list, _media-parse-phrases($query), _media-parse-phrase(list.nth($query, 1)));
    @return "#{$query}";
}

merge  

Merge maps recursively

merge($map1, $map2)

Type: function

Parameters:

name description type default
map1 Map 1 Map -
map2 Map 2 Map -

Requires: get

File source: src/merge.scss

Source
@function merge($map1, $map2) {
    @if meta.type-of($map2) != map {
        @return $map1;
    }
    @if meta.type-of($map1) != map and meta.type-of($map2) == map {
        @return $map2;
    }
    @if meta.type-of($map1) != map {
        @return $map1;
    }
    $map: $map1;
    @each $key, $value in $map2 {
        @if meta.type-of($value) == map and map.has-key($map1, $key) and meta.type-of(map.get($map1, $key)) == map {
            $map: map.merge($map, ($key: merge(map.get($map1, $key), $value)));
        } @else {
            $map: map.merge($map, ( $key: $value ));
        }
    }
    @return $map;
}

num-to-length  

Add $unit to $value

num-to-length($value, $unit)

Type: function

Parameters:

name description type default
value The number value Number -
unit The unit (eg. px) String px

Requires: str-to-num, get, _units

File source: src/num-to-length.scss

Source
@function num-to-length($value, $unit) {
    @if meta.type-of($value) != number {
        @return str-to-num($value + $unit);
    }
    @return $value * map.get($_units, $unit);
}

px2em  

Px to Em calculation

px2em($px, $default)

Type: function

Parameters:

name description type default
px Size value Number -
default Set a default font size (fallback to global variable $font-size) Number null

Requires: strip-unit, str-to-num

File source: src/px2em.scss

Source
@function px2em($px, $default) {
    $default: if(
        $default,
        $default,
        if(meta.global-variable-exists("font-size"), $font-size, 16px)
    );
    @if $default and math.unit($default) == px {
        @return math.div(1em * strip-unit($px), strip-unit($default));
    }
    @return str-to-num($px);
}

px2rem  

Px to Rem calculation

px2rem($px, $default)

Type: function

Parameters:

name description type default
px Size value Number -
default Set a default font size (fallback to global variable $font-size) Number null

Requires: strip-unit, str-to-num

File source: src/px2rem.scss

Source
@function px2rem($px, $default) {
    $default: if(
        $default,
        $default,
        if(meta.global-variable-exists("font-size"), $font-size, 16px)
    );
    @if $default and math.unit($default) == px {
        @return math.div(1rem * strip-unit($px), strip-unit($default));
    }
    @return str-to-num($px);
}

pxval  

Get value of a number in pixels

pxval($value, $default)

Type: function

Parameters:

name description type default
value Size value in px, em or rem Number -
default Set a default font size (fallback to global variable $font-size) Number null

Requires: em2px, rem2px

File source: src/pxval.scss

Source
@function pxval($value, $default) {
    @if math.unit($value) == "px" {
        @return $value;
    }
    @if math.unit($value) == "em" {
        @return em2px($value, $default);
    }
    @if math.unit($value) == "rem" {
        @return rem2px($value, $default);
    }
    @return 0;
}

rem2em  

Change rem to em (units only, no calculations)

rem2em($rem)

Type: function

Parameters:

name description type default
rem Size value Number -

Requires: str-to-num, strip-unit

File source: src/rem2em.scss

Source
@function rem2em($rem) {
    @return str-to-num(string.unquote(strip-unit($rem) + "em"));
}

rem2px  

Rem to Px calculation

rem2px($rem, $default)

Type: function

Parameters:

name description type default
rem Size value Number -
default Set a default font size (fallback to global variable $font-size) Number null

Requires: strip-unit, str-to-num

File source: src/rem2px.scss

Source
@function rem2px($rem, $default) {
    $default: if(
        $default,
        $default,
        if(meta.global-variable-exists("font-size"), $font-size, 16px)
    );
    @if $default and math.unit($default) == px {
        @return strip-unit($rem) * $default;
    }
    @return str-to-num($rem);
}

remove-nth  

Remove the $nth value of a $list

remove-nth($list, $nth)

Type: function

Parameters:

name description type default
list The list List -
nth Index of the value to be removed from list Number -

File source: src/remove-nth.scss

Source
@function remove-nth($list, $nth) {
    @if meta.type-of($list) != list or meta.type-of($nth) != number or math.abs($nth) >= list.length($list) {
        @return $list;
    }
    $result: ();
    $nth: if($nth < 0, list.length($list) + $nth + 1, $nth);
    @for $i from 1 through list.length($list) {
        @if $i != $nth {
            $result: list.append($result, list.nth($list, $i));
        }
    }
    @return if(
        list.length($result) == 1,
        list.nth($result, 1),
        list.join((), $result, $separator: list.separator($list))
    );
}

remove  

Remove $keys (deeply) from $map

remove($map, $keys...)

Type: function

Parameters:

name description type default
map The map to remove keys from Map -
keys... Keys to be removed String List -

Requires: get, remove-nth, set

File source: src/remove.scss

Source
@function remove($map, $keys...) {
    @if meta.type-of($map) != map {
        @return $map;
    }
    @each $set in $keys {
        @if meta.type-of($set) == list {
            @if get($map, $set) {
                $key: remove-nth($set, -1);
                $overwrite: remove(
                    get($map, $key),
                    list.nth($set, list.length($set))
                );
                $map: set($map, $key, $overwrite, false);
            }
        } @else {
            @if map.has-key($map, $set) {
                $map: map.remove($map, $set);
            }
        }
    }
    @return $map;
}

remval  

Get value of a number in rems

remval($value, $default)

Type: function

Parameters:

name description type default
value Size value in px, em or rem Number -
default Set a default font size (fallback to global variable $font-size) Number null

Requires: em2rem, px2rem

File source: src/remval.scss

Source
@function remval($value, $default) {
    @if math.unit($value) == "rem" {
        @return $value;
    }
    @if math.unit($value) == "em" {
        @return em2rem($value);
    }
    @if math.unit($value) == "px" {
        @return px2rem($value, $default);
    }
    @return 0;
}

same-units  

Check whether 2 numbers have the same units

same-units($number, $number2)

Type: function

Parameters:

name description type default
number Number 1 Number -
number2 Number 2 Number -

File source: src/same-units.scss

Source
@function same-units($number, $number2) {
    @return math.unit($number) == math.unit($number2);
}

scale-light  

Scale lightness by iterations to fix rounding issues

scale-light($color1, $color2, $ratio, $operation, $iterations)

Type: function

Parameters:

name description type default
color1 Color 1 Color -
color2 Color 2 Color -
ratio Ratio String "AA"
operation Operation String darken
iterations Iterations Number 5

Requires: is-contrasting

File source: src/scale-light.scss

Source
@function scale-light($color1, $color2, $ratio, $operation, $iterations) {
    @for $i from 1 through $iterations {
        @if is-contrasting($color1, $color2, $ratio) {
            @return $color1;
        } @else {
            $color1: color.adjust(
                $color1,
                $lightness: if($operation == lighten, 0.1%, -0.1%)
            );
        }
    }
    @return $color1;
}

scale-luminance  

Scale a luminance of a color by a set value

scale-luminance($color, $luminance)

Type: function

Parameters:

name description type default
color Color Color -
luminance Luminance Number -

Requires: luminance, xyz, is-between, srgb

File source: src/scale-luminance.scss

Source
@function scale-luminance($color, $luminance) {
    $scale: math.div($luminance, luminance($color));
    $red: math.clamp(xyz(color.red($color)), 0, 1) * $scale;
    $green: math.clamp(xyz(color.green($color)), 0, 1) * $scale;
    $blue: math.clamp(xyz(color.blue($color)), 0, 1) * $scale;
    $red-passes: is-between($red);
    $green-passes: is-between($green);
    $blue-passes: is-between($blue);
    @if not $red-passes or not $green-passes or not $blue-passes {
        $baseline: math.min($red, $green, $blue);
        $r: math.div($red, $baseline);
        $g: math.div($green, $baseline);
        $b: math.div($blue, $baseline);
        @if not $red-passes {
            $luminance: $luminance - 0.2126;
            $r: 0;
        }
        @if not $green-passes {
            $luminance: $luminance - 0.7152;
            $g: 0;
        }
        @if not $blue-passes {
            $luminance: $luminance - 0.0722;
            $b: 0;
        }
        $x: math.div($luminance, ($r * 0.2126 + $g * 0.7152 + $b * 0.0722));
        @if $red-passes {
            $red: $r * $x;
        }
        @if $green-passes {
            $green: $g * $x;
        }
        @if $blue-passes {
            $blue: $b * $x;
        }
    }
    @return rgb(srgb($red), srgb($green), srgb($blue));
}

select-after  

Select all elements after a specific nth value

select-after($nth, $selector)

Type: function

Parameters:

name description type default
nth The nth element Number -
selector The base selector String List "&"

Requires: selector-combine

File source: src/select-after.scss

Source
@function select-after($nth, $selector) {
    @return selector-combine($selector, "&:nth-child(n + #{$nth + 1})");
}

select-all-out-of-at-least  

Select all elements if the number of elements in the container is at least a number

select-all-out-of-at-least($num, $selector)

Type: function

Parameters:

name description type default
num The number of elements Number -
selector The base selector String List "&"

Requires: selector-combine

File source: src/select-all-out-of-at-least.scss

Source
@function select-all-out-of-at-least($num, $selector) {
	$child: list.nth(list.nth($selector, -1), -1);
    @return selector-combine($selector, "&:nth-last-child(n + #{$num}), &:nth-last-child(n + #{$num}) ~ #{$child}");
}

select-all-out-of-at-most  

Select all elements if the number of elements in the container is at most a number

select-all-out-of-at-most($num, $selector)

Type: function

Parameters:

name description type default
num The number of elements Number -
selector The base selector String List "&"

Requires: selector-combine

File source: src/select-all-out-of-at-most.scss

Source
@function select-all-out-of-at-most($num, $selector) {
	$child: list.nth(list.nth($selector, -1), -1);
    @return selector-combine($selector, "&:nth-last-child(-n + #{$num}):first-child, &:nth-last-child(-n + #{$num}):first-child ~ #{$child}");
}

select-all-out-of-between  

Select all elements if the number of elements in the container is between a min and max number

select-all-out-of-between($min, $max, $selector)

Type: function

Parameters:

name description type default
min The minimum number of elements Number -
max The maximum number of elements Number -
selector The base selector String List "&"

Requires: selector-combine

File source: src/select-all-out-of-between.scss

Source
@function select-all-out-of-between($min, $max, $selector) {
	$child: list.nth(list.nth($selector, -1), -1);
    @return selector-combine(
        $selector,
        "&:nth-last-child(n + #{$min}):nth-last-child(-n + #{$max}):first-child, &:nth-last-child(n + #{$min}):nth-last-child(-n + #{$max}):first-child ~ #{$child}"
    );
}

select-before  

Select all elements before a specific nth value

select-before($nth, $selector)

Type: function

Parameters:

name description type default
nth The nth element Number -
selector The base selector String List "&"

Requires: selector-combine

File source: src/select-before.scss

Source
@function select-before($nth, $selector) {
    @return selector-combine($selector, "&:nth-last-child(#{$nth})");
}

select-between  

Select all elements between a specific first and last nth value

select-between($first, $last, $selector)

Type: function

Parameters:

name description type default
first The first nth element Number -
last The last nth element Number -
selector The base selector String List "&"

Requires: selector-combine

File source: src/select-between.scss

Source
@function select-between($first, $last, $selector) {
    @return selector-combine($selector, "&:nth-child(n + #{$first}):nth-child(-n + #{$last})");
}

select-even-between  

Select all even nth elements between a specific first and last nth value

select-even-between($first, $last, $selector)

Type: function

Parameters:

name description type default
first The first nth element Number -
last The last nth element Number -
selector The base selector String List "&"

Requires: selector-combine

File source: src/select-even-between.scss

Source
@function select-even-between($first, $last, $selector) {
    @return selector-combine($selector, "&:nth-child(even):nth-child(n + #{$first}):nth-child(-n + #{$last})");
}

select-even  

Select all even nth elements

select-even($selector)

Type: function

Parameters:

name description type default
selector The base selector String List "&"

Requires: selector-combine

File source: src/select-even.scss

Source
@function select-even($selector) {
    @return selector-combine($selector, "&:nth-child(even)");
}

select-except-first-last  

Select all elements except the first and last

select-except-first-last($selector)

Type: function

Parameters:

name description type default
selector The base selector String List "&"

Requires: selector-combine

File source: src/select-except-first-last.scss

Source
@function select-except-first-last($selector) {
    @return selector-combine($selector, "&:not(:first-child):not(:last-child)");
}

select-except-only-child  

Select all elements except the only child

select-except-only-child($selector)

Type: function

Parameters:

name description type default
selector The base selector String List "&"

Requires: selector-combine

File source: src/select-except-only-child.scss

Source
@function select-except-only-child($selector) {
    @return selector-combine($selector, "&:not(:only-child)");
}

select-except  

Select all elements except a specific nth

select-except($nth, $selector)

Type: function

Parameters:

name description type default
nth The nth element Number -
selector The base selector String List "&"

Requires: selector-combine

File source: src/select-except.scss

Source
@function select-except($nth, $selector) {
    @return selector-combine($selector, "&:not(:nth-child(#{$nth}))");
}

select-first-last  

Select the first and last elements

select-first-last($selector)

Type: function

Parameters:

name description type default
selector The base selector String List "&"

Requires: selector-combine

File source: src/select-first-last.scss

Source
@function select-first-last($selector) {
    @return selector-combine($selector, "&:first-child, &:last-child");
}

select-first-of-type  

Select the first of the type element

select-first-of-type($selector)

Type: function

Parameters:

name description type default
selector The base selector String List "&"

Requires: selector-combine

File source: src/select-first-of-type.scss

Source
@function select-first-of-type($selector) {
    @return selector-combine($selector, "&:first-of-type");
}

select-first-out-of  

Select first element if the number of elements in the container equals to a number

select-first-out-of($num, $selector)

Type: function

Parameters:

name description type default
num The number of elements Number -
selector The base selector String List "&"

Requires: selector-combine

File source: src/select-first-out-of.scss

Source
@function select-first-out-of($num, $selector) {
	@return selector-combine($selector, "&:nth-last-child(#{$num}):first-child");
}

select-first  

Select the first element

select-first($selector)

Type: function

Parameters:

name description type default
selector The base selector String List "&"

Requires: selector-combine

File source: src/select-first.scss

Source
@function select-first($selector) {
    @return selector-combine($selector, if($nth == 1, "&:first-child", "&:nth-first-child(-n + #{$nth})"));
}

select-last-of-type  

Select the last of the type element

select-last-of-type($selector)

Type: function

Parameters:

name description type default
selector The base selector String List "&"

Requires: selector-combine

File source: src/select-last-of-type.scss

Source
@function select-last-of-type($selector) {
    @return selector-combine($selector, "&:last-of-type");
}

select-last-out-of  

Select last element if the number of elements in the container equals to a number

select-last-out-of($num, $selector)

Type: function

Parameters:

name description type default
num The number of elements Number -
selector The base selector String List "&"

Requires: selector-combine

File source: src/select-last-out-of.scss

Source
@function select-last-out-of($num, $selector) {
    @return selector-combine($selector, "&:nth-of-type(#{$num}):nth-last-of-type(1)");
}

select-last  

Select the last element

select-last($selector)

Type: function

Parameters:

name description type default
selector The base selector String List "&"

Requires: selector-combine

File source: src/select-last.scss

Source
@function select-last($selector) {
    @return selector-combine($selector, if($nth == 1, "&:last-child", "&:nth-last-child(-n + #{$nth})"));
}

select-middle  

Select the middle element

select-middle($num, $selector)

Type: function

Parameters:

name description type default
num Number of elements in the container Number -
selector The base selector String List "&"

Requires: selector-combine

File source: src/select-middle.scss

Source
@function select-middle($num, $selector) {
    @return selector-combine($selector, "&:nth-child(#{math.round(math.div($num, 2))})");
}

select-nth-between  

Select all nth elements between a first and a last value

select-nth-between($nth, $first, $last, $selector)

Type: function

Parameters:

name description type default
nth The segment number Number -
first The first nth element Number -
last The last nth element Number -
selector The base selector String List "&"

Requires: selector-combine

File source: src/select-nth-between.scss

Source
@function select-nth-between($nth, $first, $last, $selector) {
    @return selector-combine($selector, "&:nth-child(#{$nth}n):nth-child(n + #{$first}):nth-child(-n + #{$last})");
}

select-nth-both-sides  

Select nth elements from both sides of the container

select-nth-both-sides($nth, $selector)

Type: function

Parameters:

name description type default
nth The segment number Number -
selector The base selector String List "&"

Requires: selector-combine

File source: src/select-nth-both-sides.scss

Source
@function select-nth-both-sides($nth, $selector) {
    @return selector-combine($selector, "&:nth-child(#{$nth}), &:nth-last-child(#{$nth})");
}

select-nth-from  

Select nth elements from after a value

select-nth-from($nth, $from, $selector)

Type: function

Parameters:

name description type default
nth The segment number Number -
from The starting element Number -
selector The base selector String List "&"

Requires: selector-combine

File source: src/select-nth-from.scss

Source
@function select-nth-from($nth, $from, $selector) {
    @return selector-combine($selector, "&:nth-child(#{$nth}n + #{$from})");
}

select-nth  

Select every nth element

select-nth($nth, $selector)

Type: function

Parameters:

name description type default
nth The nth element Number -
selector The base selector String List "&"

Requires: selector-combine

File source: src/select-nth.scss

Source
@function select-nth($nth, $selector) {
    @return selector-combine($selector, "&:nth-child(#{$nth}n)");
}

select-odd-between  

Select all odd nth elements between a specific first and last nth value

select-odd-between($first, $last, $selector)

Type: function

Parameters:

name description type default
first The first nth element Number -
last The last nth element Number -
selector The base selector String List "&"

Requires: selector-combine

File source: src/select-odd-between.scss

Source
@function select-odd-between($first, $last, $selector) {
    @return selector-combine($selector, "&:nth-child(odd):nth-child(n + #{$first}):nth-child(-n + #{$last})");
}

select-odd  

Select all odd nth elements

select-odd($selector)

Type: function

Parameters:

name description type default
selector The base selector String List "&"

Requires: selector-combine

File source: src/select-odd.scss

Source
@function select-odd($selector) {
    @return selector-combine($selector, "&:nth-child(odd)");
}

select-only-child  

Select element only if it is an only child of its container

select-only-child($selector)

Type: function

Parameters:

name description type default
selector The base selector String List "&"

Requires: selector-combine

File source: src/select-only-child.scss

Source
@function select-only-child($selector) {
    @return selector-combine($selector, "&::only-child");
}

select-owl  

Mingle a list of selectors to go before and after the other adjacently

select-owl($selectors)

Type: function

Parameters:

name description type default
selectors The base selectors List String -

Requires: selector-combine

File source: src/select-owl.scss

Source
@function select-owl($selectors) {
    @return selector.replace(
        selector-combine($selector, "& + #___select-owl"),
        "#___select-owl",
        $selector
    );
}

select  

Return selectors for common element groups via shorthands

select($key)

Type: function

Parameters:

name description type default
key Selector group key Number -

Requires: get, selectors

File source: src/select.scss

Source
@function select($key) {
    @return if(map.has-key($selectors, $key), map.get($selectors, $key), $key);
}

selector-combine  

Combine 2 CSS selectors

selector-combine($selector1, $selector2)

Type: function

Parameters:

name description type default
selector1 Left selector String List -
selector2 Right selector String List -

Requires: str-split, str-trim, str-ends-with, str-replace, str-starts-with

File source: src/selector-combine.scss

Source
@function selector-combine($selector1, $selector2) {
    $selector-list: ();
    $selector1-list: str-split("#{$selector1}", ",");
    $selector2-list: str-split("#{$selector2}", ",");
    @each $s1 in $selector1-list {
        @each $s2 in $selector2-list {
            $s1: str-trim($s1);
            $s2: str-trim($s2);
            @if string.index($s1, "&") and str-ends-with($s1, "&") and string.index($s2, "&") {
                $selector-list: list.append(
                    $selector-list,
                    str-replace($s1, "&", $s2),
                    comma
                );
            } @else if string.index($s2, "&") and str-starts-with($s2, "&") and (not string.index($s1, "&") or str-ends-with($s1, "&") == false) {
                $s2: string.slice($s2, 2);
                $selector-list: list.append(
                    $selector-list,
                    "#{$s1}#{$s2}",
                    comma
                );
            } @else if string.index($s1, "&") and str-ends-with($s1, "&") and (string.index($s2, "&") == false or str-starts-with($s2, "&") == false) {
                $selector-list: list.append(
                    $selector-list,
                    "#{$s1} #{$s2}",
                    comma
                );
            } @else if string.index($s2, "&") {
                $selector-list: list.append(
                    $selector-list,
                    str-replace($s2, "&", $s1),
                    comma
                );
            } @else {
                $selector-list: list.append($selector-list, $s1, comma);
                $selector-list: list.append($selector-list, $s2, comma);
            }
        }
    }
    @return str-replace("#{$selector-list}", "  ", " ");
}

set  

Recusrively set map values based on keys

set($map, $keys, $value, $recursive)

Type: function

Parameters:

name description type default
map The base map Map -
keys The key or list of keys (if lookup is supposed to go deeper) List String -
value The value to be set Mixed -
recursive Whether the system should set recursively Boolean true

Requires: merge, get

File source: src/set.scss

Source
@function set($map, $keys, $value, $recursive) {
    @if meta.type-of($map) != map {
        @return $map;
    }
    $maps: list.append((), $map);
    $result: null;
    @if list.length($keys) == 1 {
        @return if(
            $recursive,
            merge(
                $map,
                (
                    $keys: $value,
                )
            ),
            map.merge(
                $map,
                (
                    $keys: $value,
                )
            )
        );
    }
    @for $i from 1 through list.length($keys) - 1 {
        $current-key: list.nth($keys, $i);
        $current-map: list.nth($maps, -1);
        $current-get: map.get($current-map, $current-key);
        @if not $current-get {
            @return $map;
        }
        $maps: list.append($maps, $current-get);
    }
    @for $i from list.length($maps) through 1 {
        $current-map: list.nth($maps, $i);
        $current-key: list.nth($keys, $i);
        $current-val: if($i == list.length($maps), $value, $result);
        $result: if(
            $recursive,
            merge(
                $current-map,
                (
                    $current-key: $current-val,
                )
            ),
            map.merge(
                $current-map,
                (
                    $current-key: $current-val,
                )
            )
        );
    }
    @return $result;
}

sides-bottom  

Get the bottom value from a list like margin or padding

sides-bottom($value)

Type: function

Parameters:

name description type default
value The list value Number List -

Requires: get, sides

File source: src/sides-bottom.scss

Source
@function sides-bottom($value) {
    @return map.get(sides($value), bottom);
}

sides-left  

Get the left value from a list like margin or padding

sides-left($value)

Type: function

Parameters:

name description type default
value The list value Number List -

Requires: get, sides

File source: src/sides-left.scss

Source
@function sides-left($value) {
    @return map.get(sides($value), left);
}

sides-right  

Get the right value from a list like margin or padding

sides-right($value)

Type: function

Parameters:

name description type default
value The list value Number List -

Requires: get, sides

File source: src/sides-right.scss

Source
@function sides-right($value) {
    @return map.get(sides($value), right);
}

sides-top  

Get the top value from a list like margin or padding

sides-top($value)

Type: function

Parameters:

name description type default
value The list value Number List -

Requires: get, sides

File source: src/sides-top.scss

Source
@function sides-top($value) {
    @return map.get(sides($value), top);
}

sides-x  

Get the right-left value from a list like margin or padding

sides-x($value, $mode)

Type: function

Parameters:

name description type default
value The list value Number List -
mode Whether to return the average or summary of the values String average

Requires: sides, get

File source: src/sides-x.scss

Source
@function sides-x($value, $mode) {
    $sides: sides($value);
    @if not map.get($sides, right) or not map.get($sides, left) {
        @return null;
    }
    @if $mode == average {
        @return math.div((map.get($sides, right) + map.get($sides, left)), 2);
    } @else {
        @return map.get($sides, right) + map.get($sides, left);
    }
}

sides-y  

Get the top-bottom value from a list like margin or padding

sides-y($value, $mode)

Type: function

Parameters:

name description type default
value The list value Number List -
mode Whether to return the average or summary of the values String average

Requires: sides, get

File source: src/sides-y.scss

Source
@function sides-y($value, $mode) {
    $sides: sides($value);
    @if not map.get($sides, top) or not map.get($sides, bottom) {
        @return null;
    }
    @if $mode == average {
        @return math.div((map.get($sides, top) + map.get($sides, bottom)), 2);
    } @else {
        @return map.get($sides, top) + map.get($sides, bottom);
    }
}

sides  

Get a map of sides from a value or list (like margin, padding)

sides($value)

Example:

sides(1px)             /* (top: 1px, right: 1px, bottom: 1px, left: 1px) */
sides(1px 2px)         /* (top: 1px, right: 2px, bottom: 1px, left: 2px) */
sides(1px 2px 3px)     /* (top: 1px, right: 2px, bottom: 3px, left: 2px) */
sides(1px 2px 3px 4px) /* (top: 1px, right: 2px, bottom: 3px, left: 4px) */

Type: function

Parameters:

name description type default
value Multi-size value (like margin, padding) Number List -

File source: src/sides.scss

Source
@function sides($value) {
    $top: null;
    $right: null;
    $bottom: null;
    $left: null;
    @if meta.type-of($value) != list and meta.type-of($value) != number {
        @return (top: null, right: null, left: null, bottom: null);
    }
    @if list.length($value) == 1 {
        $top: $value;
        $right: $value;
        $bottom: $value;
        $left: $value;
    } @else if list.length($value) == 2 {
        $top: list.nth($value, 1);
        $right: list.nth($value, 2);
        $bottom: $top;
        $left: $right;
    } @else if list.length($value) == 3 {
        $top: list.nth($value, 1);
        $right: list.nth($value, 2);
        $bottom: list.nth($value, 3);
        $left: $right;
    } @else {
        $top: list.nth($value, 1);
        $right: list.nth($value, 2);
        $bottom: list.nth($value, 3);
        $left: list.nth($value, 4);
    }
    @return (top: $top, right: $right, bottom: $bottom, left: $left);
}

size  

Return a named size

size($size, $value)

Example:

padding: s(m);                 /* #dc2626 */
margin: s(m, 3);               /* #ef4444 */
font-size: s(m, 2);            /* white - best contrasting with #dc2626 out of black or white */

Type: function

Parameters:

name description type default
size The named size List Color -
value Null for returning the size as a css var (default), or a number to return the multiplier of the size or the nth number from the list of the named size Null Number -

Requires: get, sizes

File source: src/size.scss

Source
@function size($size, $value) {
    @if not $value {
        @return var(--#{$size});
    }
    @if map.has-key($sizes, $size) and meta.type-of($value) == number {
        $size: map.get($sizes, $size);
        @if meta.type-of($size) == number {
            $size: $size * $value;
        }
        @if meta.type-of($size) == list {
            $size: nth($size, $value);
        }
    }
    @return $size;
}

s  

Return a named size

s($size, $value)

Type: function

Alias of: size

Parameters:

name description type default
size The named size List Color -
value Null for returning the size as a css var (default), or a number to return the multiplier of the size or the nth number from the list of the named size Null Number -

Requires: size

File source: src/size.scss

Source
@function s($size, $value) {
    @return size($size, $value);
}

srgb  

Returns XYZ value to RGB channel

srgb($channel)

Type: function

Parameters:

name description type default
channel Channel value Number -

File source: src/srgb.scss

Source
@function srgb($channel) {
    @return 255 * if($value <= 0.0031308, $value * 12.92, 1.055 * math.pow($value, math.div(1, 2.4)) - 0.055);
}

str-ends-with  

Check if string ends with a substring

str-ends-with($haystack, $needle)

Type: function

Parameters:

name description type default
haystack String to search in String -
needle String to search for String -

File source: src/str-ends-with.scss

Source
@function str-ends-with($haystack, $needle) {
    $haystack-length: string.length($haystack);
    $needle-length: string.length($needle);
    @if $haystack-length < $needle-length {
        @return false;
    }
    @if $haystack-length == $needle-length and $haystack == $needle {
        @return true;
    }
    @return if($needle == string.slice($haystack, $haystack-length - $needle-length + 1), true, false);
}

str-replace  

Replace $search with $replace in $string

str-replace($string, $search, $replace)

Type: function

Parameters:

name description type default
string Initial string String -
search Substring to replace String -
replace New value String ""

File source: src/str-replace.scss

Source
@function str-replace($string, $search, $replace) {
    $index: string.index($string, $search);
    @if $index {
        @return string.slice($string, 1, $index - 1) + $replace + str-replace(string.slice($string, $index + string.length($search)), $search, $replace);
    }
    @return $string;
}

str-split  

Split a string into a list of strings along a delimiter

str-split($string, $delimiter, $clean)

Type: function

Parameters:

name description type default
string The string to split String -
delimiter The delimiter to split along String "-"
clean Whether to remove empty strings from the array Boolean true

File source: src/str-split.scss

Source
@function str-split($string, $delimiter, $clean) {
    $result: ();
    $length: string.length($string);
    @if string.length($delimiter) == 0 {
        @for $i from 1 through $length {
            $slice: string.slice($string, $i, $i);
            $result: if(not $clean or string.length($slice) > 0, list.append($result, $slice), $result);
        }
        @return $result;
    }
    $splitting: true;
    $remaining: $string;
    @while $splitting {
        $index: string.index($remaining, $delimiter);
        @if $index {
            $slice: string.slice($remaining, 1, ($index - 1));
            $result: if(not $clean or string.length($slice) > 0, list.append($result, $slice), $result);
            $remaining: string.slice(
                $remaining,
                $index + string.length($delimiter)
            );
        } @else {
            $splitting: false;
        }
    }
    @return if(not $clean or string.length($remaining) > 0, list.append($result, $remaining), $result);
}

str-starts-with  

Check if string starts with a substring

str-starts-with($haystack, $needle)

Type: function

Parameters:

name description type default
haystack String to search in String -
needle String to search for String -

File source: src/str-starts-with.scss

Source
@function str-starts-with($haystack, $needle) {
    $haystack-length: string.length($haystack);
    $needle-length: string.length($needle);
    @if $haystack-length < $needle-length {
        @return false;
    }
    @if $haystack-length == $needle-length and $haystack == $needle {
        @return true;
    }
    @return if($needle == string.slice($haystack, 1, $needle-length), true, false);
}

str-to-num  

Cast a string $value into a number

str-to-num($value)

Type: function

Parameters:

name description type default
value The value to be cast Number String -

Requires: get, _numbers, _units

File source: src/str-to-num.scss

Source
@function str-to-num($value) {
    @if meta.type-of($value) == number {
        @return $value;
    }
    $result: 0;
    $digits: 0;
    $minus: string.slice($value, 1, 1) == "-";
    @for $i from if($minus, 2, 1) through string.length($value) {
        $character: string.slice($value, $i, $i);
        @if not(map.has-key($_numbers, $character) or $character == ".") {
            @return if($minus, -$result, $result) * map.get($_units, string.slice($value, $i));
        }
        @if $character == "." {
            $digits: 1;
        } @else if $digits == 0 {
            $result: $result * 10 + map.get($_numbers, $character);
        } @else {
            $digits: $digits * 10;
            $result: $result + math.div(map.get($_numbers, $character), $digits);
        }
    }
    @return if($minus, -$result, $result);
}

str-trim-end  

Trim whitespace from the end of a string

str-trim-end($string)

Type: function

Parameters:

name description type default
string String to trim String -

File source: src/str-trim-end.scss

Source
@function str-trim-end($string) {
    @if string.slice($string, string.length($string), -1) == " " {
        @return str-trim-end(string.slice($string, 1, -2));
    }
    @return $string;
}

str-trim-start  

Trim whitespace from the beginning of a string

str-trim-start($string)

Type: function

Parameters:

name description type default
string String to trim String -

File source: src/str-trim-start.scss

Source
@function str-trim-start($string) {
    @if string.slice($string, 1, 1) == " " {
        @return str-trim-start(string.slice($string, 2));
    }
    @return $string;
}

str-trim  

Trim whitespace off a string

str-trim($string)

Type: function

Parameters:

name description type default
string String to trim String -

Requires: str-trim-start, str-trim-end

File source: src/str-trim.scss

Source
@function str-trim($string) {
    @return str-trim-start(str-trim-end($string));
}

strip-unit  

Remove units from a number

strip-unit($number)

Example:

$result: strip-unit(12px);    /* 12 */
$result: strip-unit(-12em);   /* -12 */
$result: strip-unit(12rem);   /* 12 */
$result: strip-unit(2.2deg);  /* 2.2 */

Type: function

Parameters:

name description type default
number Number with a unit Number -

Requires: str-to-num

File source: src/strip-unit.scss

Source
@function strip-unit($number) {
    @if meta.type-of($number) == string and meta.type-of(str-to-num($number)) == number {
        $number: str-to-num($number);
    }
    @if meta.type-of($number) == number and not math.is-unitless($number) {
        @return math.div($number, ($number * 0 + 1));
    }
    @return $number;
}

svg-base64  

Base64 encode svg code

svg-base64($svg, $fill)

Type: function

Parameters:

name description type default
svg The svg code String -
fill A fill color to be added to svg Color null

Requires: str-replace

File source: src/svg-base64.scss

Source
@function svg-base64($svg, $fill) {
    $svg: str-replace(
        $svg,
        "<svg ",
        if($fill, '<svg fill="#{$fill}" ', "<svg ")
    );
    $svg: str-replace($svg, "<", "%3C");
    $svg: str-replace($svg, ">", "%3E");
    $svg: str-replace($svg, "#", "%23");
    $svg: str-replace($svg, '"', "'");
    $svg: str-replace($svg, "`", "'");
    @return "data:image/svg+xml,#{$svg}";
}

svg-url  

SVG base64 background url based on $svg with optional $fill color

svg-url($svg, $fill)

Type: function

Parameters:

name description type default
svg The SVG code String -
fill Fill color for the icon Color null

Requires: svg-base64

File source: src/svg-url.scss

Source
@function svg-url($svg, $fill) {
    @return url(svg-base64($svg, $fill));
}

tetrad  

Get the tetrad pairs of a color

tetrad($color, $step)

Type: function

Parameters:

name description type default
color Color Color -
step Which tetrad to get Number 1

File source: src/tetrad.scss

Source
@function tetrad($color, $step) {
    @return color.adjust($color, $hue: $step * 90);
}

triad  

Get the triad pairs of a color

triad($color, $step)

Type: function

Parameters:

name description type default
color Color Color -
step Which triad to get Number 1

File source: src/triad.scss

Source
@function triad($color, $step) {
    @return color.adjust($color, $hue: $step * 120);
}

unique-id-by-value  

Generate a unique ID based on passed-in attributes

unique-id-by-value($values...)

Type: function

Parameters:

name description type default
values... Attributes Mixed -

Requires: merge, _unique-ids

File source: src/unique-id-by-value.scss

Source
@function unique-id-by-value($values...) {
    $found: list.index(map.values($_unique-ids), $values);
    @if $found {
        @return list.nth(list.nth($_unique-ids, $found), 1);
    } @else {
        $id: string.unique-id();
        $_unique-ids: map.merge(
            $_unique-ids,
            (
                $id: $values,
            )
        ) !global;

        @return $id;
    }
}

whiten  

Mix a color with white

whiten($color, $ratio)

Type: function

Parameters:

name description type default
color Color Color -
ratio Ratio Number 50

File source: src/whiten.scss

Source
@function whiten($color, $ratio) {
    @return color.mix(#fff, $color, $ratio);
}

xyz  

Return an RGB channel processed as XYZ

xyz($channel)

Type: function

Parameters:

name description type default
channel Channel value Number -

File source: src/xyz.scss

Source
@function xyz($channel) {
    $channel: math.div($channel, 255);
    @return if(
        $channel <= 0.03928,
        math.div($channel, 12.92),
        math.pow(math.div(($channel + 0.055), 1.055), 2.4)
    );
}

Variables

asset-path  

The default asset path to prepend

$asset-path

Type: variable

File source: src/asset.scss


color-palette  

Named colors palette

$color-palette

Type: variable

File source: src/color.scss


media-queries  

Named shorthands for media queries (values should be full media query strings or a number value) (if a number value, the value will be used as min-width or a calculated value when used as max-width - see examples)

$media-queries

Type: variable

File source: src/media.scss


selectors  

List of selector shorthands

$selectors

Type: variable

File source: src/select.scss


sizes  

A map of named sizes (each may have one value or a list of values)

$sizes

Type: variable

File source: src/size.scss



Usage example

You can @use each component on its own without loading the entire library

@use "sass-styler/flex-grid" as *;

div.columns {
    @include flex-grid(1 of 3, 20px);
}

Or you @use load a whole module to use all of its components

@use "sass-styler" as *;

@include normalize();

.card {
    @include elevation(3);
}

Package Sidebar

Install

npm i sass-styler

Weekly Downloads

63

Version

3.2.8

License

ISC

Unpacked Size

311 kB

Total Files

139

Last publish

Collaborators

  • arpadhegedus