@stylize/sass-func
v1.0.4
Published
Sass functions for general usage
Downloads
695
Maintainers
Readme
sass-func
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)