sass-func
Collection of Sass functions for general usage
Install
npm install @stylize/sass-func --save-devOther packages
| Name | Description | Package |
|---|---|---|
| @stylize/sass-mixin | Mixins for general usage |  |
| @stylize/sass-shape | Mixins for creating shapes |  |
Usage
Mixins can be imported directly from the package or namespace.
// Default import with prefixes str-, list-, etc.
@use '~@stylize/sass-func' as *// Namespaced import without prefix.
@use '~@stylize/sass-func/<namespace>' as *Font
Function to create the value for font property.
font($size: inherit, $line: normal, $weight: normal, $family: null)Examples
// Default.
font()
// Font size.
font(10px)
// Font size, line-height.
font(10px 1rem)
// Font size, line-height, font-weight.
font(10px, 1rem, 300)
// Font size, line-height, font-weight, font-family.
font(10px, 1rem, 300, (Arial, san-sarif))Default family can be configurable by loading module with configuration.
/// Base family.
$base-family: Arial, sans-serif !defaultList
Forwards sass:list so build-in functions can be used.
chunk
Split the list into smaller chunks with defined size.
chunk($list, $size)Examples
// List with 1 chunk.
chunks(item1 item2, 3)
// List with 2 chunks: [item1 item2, item3]
chunks(item1 item2 item3, 2)contains
Determine whether the list contains the item.
contains($list, $item)Examples
// True as item is found
contains(item1 item2, item1)difference
Get the difference between lists.
difference($lists...)Examples
// Difference: [item2, item3]
difference([item1 item2], item3 item1)drop
Drop n items from beginning of the list.
drop($list, $n: 1)Examples
// List: [item2, item3]
drop(item1 item2 item3, 1)every
Determine if predicate returns true for all items in the list.
every($list, $predicate, $args...)Examples
// True as all items is a string.
every([item1 item2], meta.get-function(is-string))fill
Fill out the list with a certain number of items.
fill($list, $n, $value: null)Examples
// List with 4 zero items.
fill([], 4, 0)
// List with: [item1 item2 0 0].
fill(item1 item2, 4, 0)first
Get the first item on the list.
first($list)Examples
// First item: item1
first(item1 item2)flatten
Make the list flattened to the certain depth level.
flatten($list, $depth: null)Examples
// Flatten to the plain list.
flatten([item1 item2, item3 item4])
// Flatten with only first level depth.
flatten([item1 (item2, [item3 item4])], 1)has-multiple
Determine whether there is multiple items in the list.
has-multiple($list)Examples
// False as only 1 item.
has-multiple(item1)
// True as multiple items.
has-multiple(item1 item2)has-single
Determine whether there is only one item in the list.
has-single($list)Examples
// True as only 1 item.
has-single(item1)
// False as multiple items.
has-single(item1 item2)insert-nth
Insert value at the index to the list.
insert-nth($list, $index, $value)Examples
// Add item between item1 and item3
insert-nth(item1 item3, 2, item2)intersection
Returns intersections between lists.
intersection($lists...)Examples
// `item1` as intersection.
intersection(item1 item2, item3 item1)is-empty
Determine whether the list is empty.
is-empty($list)Examples
// True as empty.
is-empty([])
// True as have items.
is-empty(item1 item2)last
Get the last item on the list.
last($list)Examples
// `item2` as last item.
last(item1 item2)last-index
Get the last index of value on the list.
last-index($list, $value)Examples
// Last index is 2.
last-index(item1 item1 item2, item1)map
Iterate through the list and call the function on each item.
map($list, $function, $args...)Examples
// Invokes function on each item.
map([item1 item2], meta.get-function(do-something))
// Invokes function on each item with extra param.
map([item1 item2], meta.get-function(do-something), 1px)prepend
Prepend an item to the list.
prepend($list, $item, $separator: auto)Examples
// Prepend item to list.
prepend(item1, [item2 item3])
// Prepend item to list and specify separator.
prepend(item1, [item2 item3], comma)range
Create a list with a specified range (n).
range($n)Examples
// Create list: `[1, 2, 3, 4]`
range(4)remove
Remove item from the list.
remove($list, $tem)Examples
// Remove all item1.
remove(item1 item2 item1, item1)remove-nth
Remove item under index from the list.
remove-nth($list, $index)Examples
// Remove the second item.
remove-nth(item1 item2 item3, 2)reverse
Reverse the list from end to start.
reverse($list)Examples
reverse(item1 item2)slice
Slice list between start and end.
slice($list, $start: 1, $end: null)Examples
// Slice list from second item to end.
slice(item1 item2, 2)some
Determine if predicate returns true for some items in the list.
some($list, $predicate, $args...)Examples
// True as one item is a string.
some([item1 null], meta.get-function(is-string))tail
Get all items except the first.
tail($list)Examples
// [item2 item3] as first item omitted.
tail(item1 item2 item3)take
Get first n items from the list.
take($list, $n: 1)Examples
// item1 item2 as first 2 items.
take(item1 item2 item3, 2)to-string
Joins all the items of the list with glue.
to-string($list, $glue: '')Examples
// `item1/item2` joined with glue.
to-string(item1 item2, '/')unique
Removes duplicate values from list.
unique($list)Examples
// `[item1, item2]`
unique(item1 item2 item1)Map
Forwards sass:map so built-in functions can be used.
entries
Get the entries of map as list of keys and values.
entries($map)Examples
// List: [key1 item1]
entries((key1: item1))Math
Forwards sass:math so built-in functions can be used.
pow
Raises base to the power of exponent with support for numbers with unit.
pow($base, $exponent)Examples
pow(16px, 2)sqr
Raises base to the power of 2 with support for numbers with unit.
sqr($base)Examples
sqr(16px)sqrt
Get the square root of number with support for numbers with unit.
sqrt($base)Examples
sqrt(16px)to-fixed
Format number to fixed amount of decimals.
to-fixed($float, $digits: 2)Examples
// 3.14
to-fixed(3.1415, 2)Meta
Forwards sass:meta so built-in functions can be used.
is-list
Determine whether var is list type.
is-list($var)Examples
// True as it's list
is-list(item1 item2)is-map
Determine whether var is map type.
is-map($var)Examples
is-map((1: item1, 2: item2))is-number
Determine whether var is number type.
is-number($var)Examples
is-number(1px)is-string
Determine whether var is string type.
is-string($var)Examples
is-string(str)Number
parse
Parse string and create the number.
parse($value)Examples
parse('20dpi')String
Forwards sass:string so built-in functions can be used.
drop
Drop n chars from beginning of the string.
drop($string, $n: 1)Examples
// Result: string
drop('search-string', 7)replace
Replace search with replace in string.
replace($string, $search, $replace: '')Examples
replace('search-string', '-string', '-str')split
Split string with separator into substrings.
split($string, $separator)Examples
split('-str1-str2-', '-')take
Get first n chars from the string.
take($string, $n: 1)Examples
// Result: st
take(string, 2)trim
Removes leading and trailing char from string.
trim($string, $char: ' ')Examples
trim('-string-', '-')trim-end
Removes trailing char from string.
trim-end($string, $char: ' ')Examples
trim-end('string-', '-')trim-start
Removes leading char from string.
trim-start($string, $char: ' ')Examples
trim-start('-string', '-')Unit
Module have $base-size !default that used for em and rem conversion.
is
Determine whether var is valid unit.
is($unit)Examples
is(px)get
Get the unit from the number.
get($number)Examples
get(1px)add
Add the unit to the number.
add($number, $unit)Examples
add(1, dpi)strip
Remove the unit from the number.
strip($number)Examples
strip(1dpi)em
Convert the units to the em.
em($number, $base: $base-size)Examples
em(16px) // 1emrem
Convert the units to the rem.
rem($number, $base: $base-size)Examples
rem(16px) // 1emZ-index
set-order
Configure orders to be used by index.
set-order($config, $base: 0)Examples
set-order(footer header, 100)
set-order((footer: 10, header: 20))z-index
Get the z-index by path namespace.
z-index($path...)Examples
z-index(page, header)