main
functions
easing
@function easing() { ... }Description
Custom easing function
Parameters
None.
Requires
- [variable]
easings
em
@function em($values, $context: 16px) { ... }Description
Convert px to em
Parameters
| parameter Name | parameter Description | parameter Type | parameter Default value |
|---|---|---|---|
$values | Value or values to convert | Number or Map | — none |
$context | Base font size | Number | 16px |
Returns
Converted value or list of values
Throws
🔴 #{$context} size must be in pixels
scale-clamp
@function scale-clamp($map, $units: vw) { ... }Description
Generate clamp() to smoothly scale a value between two breakpoints
Parameters
| parameter Name | parameter Description | parameter Type | parameter Default value |
|---|---|---|---|
$map | Map of breakpoints and values | Map | — none |
$units | Optionally specify container query units | String | vw |
Returns
String —Custom clamp() formula
Example
p {
font-size: scale-clamp((375px: 16px, 960px: 20px));
}Used by
- [mixin]
scale
Links
svg-url
@function svg-url($svg, $props) { ... }Description
Inline SVG in url() for background-image
Parameters
| parameter Name | parameter Description | parameter Type | parameter Default value |
|---|---|---|---|
$svg | SVG markup | String | — none |
$props | SVG attributes | Map | — none |
Returns
String —Inline SVG as url("data:image/svg+xml,…")
Example
.foo {
background-image: svg-url('chevDown', (fill: none, stroke: red, stroke-width: 1px));
}Requires
- [variable]
escape-chars - [function]
str-replace - [function]
url-encode
Links
- https://www.sassmeister.com/gist/c2f12e64b242469d728f335ed612ae35
- https://css-tricks.com/probably-dont-base64-svg/
- https://codepen.io/tigt/post/optimizing-svgs-in-data-uris
- https://codepen.io/jakob-e/pen/doMoML
- https://yoksel.github.io/url-encoder/
- https://www.sassmeister.com/gist/594de57bc18015df9dc568e96aff9075
mixins
absolute-fill
@mixin absolute-fill() { ... }Description
Absolutely position an element and fill available space
Parameters
None.
burger
@mixin burger() { ... }Description
Burger menu icon mixin
Parameters
None.
Example
.icon {
--burger-icon-gutter: 6px;
--burger-icon-stroke-width: 2px;
--burger-icon-width: 30px;
// Default vars
// --burger-icon-color: currentColor;
// --burger-icon-radius: 0;
// --burger-icon-speed: 200ms;
// --burger-icon-cross-angle: 45deg;
@include burger;
&.is-active {
@include burger-to-cross;
}
}Links
Author
Joren Van Hee
burger-to-cross
@mixin burger-to-cross() { ... }Description
Animate burger icon to a cross
Parameters
None.
Example
.icon {
--burger-icon-cross-angle: 30deg;
--burger-icon-cross-color: megenta;
@include burger;
&.is-active {
@include burger-to-cross;
}
}font-smoothing
@mixin font-smoothing($enabled) { ... }Description
Apply font smoothing in Safari, Chrome, and Firefox. Use sparringly!
Parameters
| parameter Name | parameter Description | parameter Type | parameter Default value |
|---|---|---|---|
$enabled | Enable or disable smoothing | Boolean | — none |
Links
scale
@mixin scale($properties, $map, $initial: true) { ... }Description
Scale a value for any number of properites relative to the viewport width
Parameters
| parameter Name | parameter Description | parameter Type | parameter Default value |
|---|---|---|---|
$properties | Properties to scale | String or List | — none |
$map | Map of breakpoints and values | Map | — none |
$initial | Output initial value (not inside media query) | Boolean | true |
Throws
scale() requires at least two breakpoints
Requires
- [function]
scale-clamp
Links
- http://www.sassmeister.com/gist/7f22e44ace49b5124eec
- http://madebymike.com.au/writing/precise-control-responsive-typography/
- https://zellwk.com/blog/viewport-based-typography/
- http://codepen.io/indrekpaas/pen/VarLaJ?editors=1100
- http://codepen.io/maranomynet/pen/ozNpXV?editors=1100
- https://www.smashingmagazine.com/2016/05/fluid-typography/
- https://github.com/Jakobud/poly-fluid-sizing
break-word
@mixin break-word() { ... }Description
Break long words, hyphenate if possible (requires lang attribute)
Parameters
None.
Links
variables
easings
$easings: (
'linear' : '0.25, 0.25, 0.75, 0.75',
'ease' : '0.25, 0.1, 0.25, 1',
'ease-in' : '0.42, 0, 1, 1',
'ease-out' : '0, 0, 0.58, 1',
'ease-in-out' : '0.42, 0, 0.58, 1',
'easeInBack' : '0.6, -0.28, 0.735, 0.045',
'easeInCirc' : '0.6, 0.04, 0.98, 0.335',
'easeInCubic' : '0.55, 0.055, 0.675, 0.19',
'easeInExpo' : '0.95, 0.05, 0.795, 0.035',
'easeInQuad' : '0.55, 0.085, 0.68, 0.53',
'easeInQuart' : '0.895, 0.03, 0.685, 0.22',
'easeInQuint' : '0.755, 0.05, 0.855, 0.06',
'easeInSine' : '0.47, 0, 0.745, 0.715',
'easeInOutBack' : '0.68, -0.55, 0.265, 1.55',
'easeInOutCirc' : '0.785, 0.135, 0.15, 0.86',
'easeInOutCubic' : '0.645, 0.045, 0.355, 1',
'easeInOutExpo' : '1, 0, 0, 1',
'easeInOutQuad' : '0.455, 0.03, 0.515, 0.955',
'easeInOutQuart' : '0.77, 0, 0.175, 1',
'easeInOutQuint' : '0.86, 0, 0.07, 1',
'easeInOutSine' : '0.445, 0.05, 0.55, 0.95',
'easeOutBack' : '0.34, 1.56, 0.64, 1',
'easeOutCirc' : '0.075, 0.82, 0.165, 1',
'easeOutCubic' : '0.215, 0.61, 0.355, 1',
'easeOutExpo' : '0.19, 1, 0.22, 1',
'easeOutQuad' : '0.25, 0.46, 0.45, 0.94',
'easeOutQuart' : '0.165, 0.84, 0.44, 1',
'easeOutQuint' : '0.23, 1, 0.32, 1',
'easeOutSine' : '0.39, 0.575, 0.565, 1',
) !default;Description
Custom easings map
Type
Map
Used by
- [function]
easing
Links
escape-chars
$escape-chars: (
'"': '\'',
'%': '%25',
'#': '%23',
'<': '%3C',
'>': '%3E',
) !default;Description
Characters to escape from SVGs
Type
Map
Used by
- [function]
svg-url - [function]
url-encode
selectors
mixins
static
@mixin static() { ... }Description
Alias for :any-link
Parameters
None.
attention
@mixin attention() { ... }Description
Alias for :is(:hover, :focus, :active)
Parameters
None.
all-states
@mixin all-states() { ... }Description
Alias for :is(:any-link, :hover, :focus, :active)
Parameters
None.
root-add
@mixin root-add($selector) { ... }Description
Add selector to root (requires Sass 3.4+)
Parameters
| parameter Name | parameter Description | parameter Type | parameter Default value |
|---|---|---|---|
$selector | Selector to add to root | String | — none |
Example
.foo {
@include root-add(a) {
content: 'a.foo';
}
@include root-add('.bar') {
content: '.foo.bar';
}
}Throws
🔴 selector-append() is not supported. Please upgrade to Sass 3.4+
Links
root-before
@mixin root-before($selector) { ... }Description
Prepend selector (requires Sass 3.4+)
Parameters
| parameter Name | parameter Description | parameter Type | parameter Default value |
|---|---|---|---|
$selector | Selector to insert before root | String | — none |
Example
.foo {
@include root-before(a) {
content: 'a .foo';
}
@include root-before('.bar') {
content: '.bar .foo';
}
}Throws
🔴 selector-nest() is not supported. Please upgrade to Sass 3.4+
Links
text-inputs
@mixin text-inputs() { ... }Description
Helper to select all text input types
Parameters
None.
utilities
functions
str-replace
@function str-replace($string, $search, $replace: '') { ... }Description
Replace $search with $replace in $string
Parameters
| parameter Name | parameter Description | parameter Type | parameter Default value |
|---|---|---|---|
$string | Initial string | String | — none |
$search | Substring to replace | String | — none |
$replace | New value | String | '' |
Returns
String —Updated string
Example
str-replace("abcde", "bc", "a") => "aade"Used by
- [function]
svg-url - [function]
url-encode
Links
- http://sassmeister.com/gist/1b4f2da5527830088e4d
- http://hugogiraudel.com/2014/01/13/sass-string-replacement-function/
Author
Kitty Giraudel
strip-unit
@function strip-unit($arg) { ... }Description
Strip units
Parameters
| parameter Name | parameter Description | parameter Type | parameter Default value |
|---|---|---|---|
$arg | Value to strip | Number | — none |
Returns
Number —Stripped value
Throws
🔴 strip-unit(#{inspect($arg)} is not a valid number
Links
url-encode
@function url-encode($string) { ... }Description
URL-encode string
Parameters
| parameter Name | parameter Description | parameter Type | parameter Default value |
|---|---|---|---|
$string | String to encode | String | — none |
Returns
String —URL-encoded string
Requires
- [variable]
escape-chars - [function]
str-replace
Used by
- [function]
svg-url