@stylize/sass-func v1.0.4

sass-func

• Font
• List
• Map
• Math
• Meta
• String
• Unit
• Z-index

Install

npm install @stylize/sass-func --save-dev

Other 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)

// 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 !default

List

Forwards sass:list so build-in functions can be used.

chunk

Split the list into smaller chunks with defined size.

chunk($list, $size)

// 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)

// True as item is found
contains(item1 item2, item1)

difference

Get the difference between lists.

difference($lists...)

// Difference: [item2, item3]
difference([item1 item2], item3 item1)

drop

Drop n items from beginning of the list.

drop($list, $n: 1)

// List: [item2, item3]
drop(item1 item2 item3, 1)

every

Determine if predicate returns true for all items in the list.

every($list, $predicate, $args...)

// 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)

// 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)

// First item: item1
first(item1 item2)

flatten

Make the list flattened to the certain depth level.

flatten($list, $depth: null)

// 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)

// 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)

// 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)

// Add item between item1 and item3
insert-nth(item1 item3, 2, item2)

intersection

Returns intersections between lists.

intersection($lists...)

// `item1` as intersection.
intersection(item1 item2, item3 item1)

is-empty

Determine whether the list is empty.

is-empty($list)

// True as empty.
is-empty([])
// True as have items.
is-empty(item1 item2)

last

Get the last item on the list.

last($list)

// `item2` as last item.
last(item1 item2)

last-index

Get the last index of value on the list.

last-index($list, $value)

// 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...)

// 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)

// 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)

// Create list: `[1, 2, 3, 4]`
range(4)

remove

Remove item from the list.

remove($list, $tem)

// Remove all item1.
remove(item1 item2 item1, item1)

remove-nth

Remove item under index from the list.

remove-nth($list, $index)

// Remove the second item.
remove-nth(item1 item2 item3, 2)

reverse

Reverse the list from end to start.

reverse($list)

reverse(item1 item2)

slice

Slice list between start and end.

slice($list, $start: 1, $end: null)

// 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...)

// True as one item is a string.
some([item1 null], meta.get-function(is-string))

tail

Get all items except the first.

tail($list)

// [item2 item3] as first item omitted.
tail(item1 item2 item3)

take

Get first n items from the list.

take($list, $n: 1)

// 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: '')

// `item1/item2` joined with glue.
to-string(item1 item2, '/')

unique

Removes duplicate values from list.

unique($list)

// `[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)

// 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)

pow(16px, 2)

sqr

Raises base to the power of 2 with support for numbers with unit.

sqr($base)

sqr(16px)

sqrt

Get the square root of number with support for numbers with unit.

sqrt($base)

sqrt(16px)

to-fixed

Format number to fixed amount of decimals.

to-fixed($float, $digits: 2)

// 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)

// True as it's list
is-list(item1 item2)

is-map

Determine whether var is map type.

is-map($var)

is-map((1: item1, 2: item2))

is-number

Determine whether var is number type.

is-number($var)

is-number(1px)

is-string

Determine whether var is string type.

is-string($var)

is-string(str)

Number

parse

Parse string and create the number.

parse($value)

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)

// Result: string
drop('search-string', 7)

replace

Replace search with replace in string.

replace($string, $search, $replace: '')

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

split

Split string with separator into substrings.

split($string, $separator)

split('-str1-str2-', '-')

take

Get first n chars from the string.

take($string, $n: 1)

// Result: st
take(string, 2)

trim

Removes leading and trailing char from string.

trim($string, $char: ' ')

trim('-string-', '-')

trim-end

Removes trailing char from string.

trim-end($string, $char: ' ')

trim-end('string-', '-')

trim-start

Removes leading char from string.

trim-start($string, $char: ' ')

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)

is(px)

get

Get the unit from the number.

get($number)

get(1px)

add

Add the unit to the number.

add($number, $unit)

add(1, dpi)

strip

Remove the unit from the number.

strip($number)

strip(1dpi)

em

Convert the units to the em.

em($number, $base: $base-size)

em(16px) // 1em

rem

Convert the units to the rem.

rem($number, $base: $base-size)

rem(16px) // 1em

Z-index

set-order

Configure orders to be used by index.

set-order($config, $base: 0)

set-order(footer header, 100)
set-order((footer: 10, header: 20))

z-index

Get the z-index by path namespace.

z-index($path...)

z-index(page, header)