Modular scss utility library to build better styles faster
npm i sass-styler
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) |
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
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
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
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 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
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
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 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 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
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 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
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
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 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
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
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
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 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
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
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
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
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
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
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 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
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
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
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
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
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
|
"&" |
File source: src/pseudo-with-position.scss
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 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 styles
@include reset
Type: mixin
File source: src/reset.scss
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
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
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 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
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 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 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
Remove list styles
@include unstyled-list
Type: mixin
File source: src/unstyled-list.scss
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);
}
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;
}
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);
}
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});
}
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});
}
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
);
}
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;
}
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;
}
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);
}
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;
}
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);
}
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;
}
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;
}
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;
}
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};
}
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);
}
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"));
}
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 |
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;
}
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 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 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 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})"));
}
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;
}
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;
}
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);
}
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);
}
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;
}
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;
}
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)}";
}
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;
}
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;
}
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 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;
}
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);
}
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);
}
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);
}
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 |
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;
}
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"));
}
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 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 $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;
}
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 |
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;
}
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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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");
}
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
);
}
Return selectors for common element groups via shorthands
select($key)
Type: function
Parameters:
name | description | type | default |
---|---|---|---|
key | Selector group key | Number |
- |
File source: src/select.scss
Source
@function select($key) {
@return if(map.has-key($selectors, $key), map.get($selectors, $key), $key);
}
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}", " ", " ");
}
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 |
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;
}
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
|
- |
File source: src/sides-bottom.scss
Source
@function sides-bottom($value) {
@return map.get(sides($value), bottom);
}
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
|
- |
File source: src/sides-left.scss
Source
@function sides-left($value) {
@return map.get(sides($value), left);
}
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
|
- |
File source: src/sides-right.scss
Source
@function sides-right($value) {
@return map.get(sides($value), right);
}
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
|
- |
File source: src/sides-top.scss
Source
@function sides-top($value) {
@return map.get(sides($value), top);
}
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 |
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);
}
}
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 |
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);
}
}
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);
}
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
|
- |
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;
}
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);
}
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);
}
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);
}
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;
}
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);
}
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);
}
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);
}
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;
}
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;
}
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));
}
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;
}
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 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));
}
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);
}
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);
}
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;
}
}
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);
}
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)
);
}
The default asset path to prepend
$asset-path
Type: variable
File source: src/asset.scss
Named colors palette
$color-palette
Type: variable
File source: src/color.scss
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
List of selector shorthands
$selectors
Type: variable
File source: src/select.scss
A map of named sizes (each may have one value or a list of values)
$sizes
Type: variable
File source: src/size.scss
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);
}