Easing » CSS Variables
$easing-var-prefix (string)
$easing-var-prefix: 'ease-' !default;
Since CSS variables are often defined in a global space,
it can be useful to prefix different variable types.
Accoutrement maps help solve that problem in Sass,
so we wanted to carry that over into our CSS variable support.
Set a prefix for all easing-tokens,
and we’ll apply it when setting or calling css variables
based on your easing maps.
Set to null
or ''
(empty string) for no prefix.
Since 2.0.0
:
- NEW: Initial release
Example
tools.$easing: ('my-ease': '#_in-out-back');
tools.$easing-var-prefix: 'prefix_';
html { @include tools.ease--('my-ease') }
html {
--prefix_my-ease: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
@mixin easing--()
Convert any easing-map into CSS variables,
using the global $easing-var-prefix
.
- Easing names that start with
_
or-
are considered “private” and will not be output as variables - Easing values that contain a simple alias with no adjustments
will be output with a
var()
value, keeping the alias relationship intact
Since 2.0.0
:
- NEW: Initial release
Parameters & Output
$source: $easing (map)
Optionally use a custom map of easing tokens to set as css variables
{CSS output} (code block)
Custom properties for all public easing in the map
Example
tools.$easing: (
'_elastic': cubic-bezier(0.5, -0.4, 0.5, 1.4),
'modal': '#_elastic',
'error-message': '#modal',
);
html {
@include tools.easing--;
}
html {
--ease-modal: cubic-bezier(0.5, -0.4, 0.5, 1.4);
--ease-error-message: var(--ease-modal, cubic-bezier(0.5, -0.4, 0.5, 1.4));
}
@mixin ease--()
Set a single custom property based on a map-easing, with optional alias and fallback
Since 2.0.0
:
- NEW: Initial release
Parameters
$ease: (*)
Easing name available in the $source
map,
or alias to use in naming the CSS variable
$value: null (string | null)
Optional value for the variable,
if different from the given $ease
$fallback: true (*)
The optional fallback value for a var()
function:
true
will generate a fallback based on the token value- A token name will fallback to the value of that CSS variable and then to the token’s calculated value
- Any other fallback will be passed through unchanged
$source: $easing (map)
Optional map of easing to use as a palette source
Example
tools.$easing: (
'_elastic': cubic-bezier(0.5, -0.4, 0.5, 1.4),
'modal': '#_elastic',
'error-message': '#modal',
);
.example {
@include tools.ease--('modal');
@include tools.ease--('toast', 'modal', ease-in);
}
.example {
--ease-modal: cubic-bezier(0.5, -0.4, 0.5, 1.4);
--ease-toast: var(--ease-modal, ease-in);
}
@function var-ease()
Access the CSS variable associated with a given token, along with a fallback value based on the token itself
Since 2.0.0
:
- NEW: Initial release
Parameters & Return
$ease: (*)
Easing name available in the $source
map
$fallback: true (*)
The optional fallback value for a var()
function:
true
will generate a fallback based on the token value- A token name will fallback to the value of that CSS variable and then to the token’s calculated value
- Any other fallback will be passed through unchanged
$source: (map)
Optional Accoutrement map of easing tokens to use as source
@return (string)
CSS variable call, in the format:
var(--<token>, <fallback>)
Example
tools.$easing: (
'_elastic': cubic-bezier(0.5, -0.4, 0.5, 1.4),
'modal': '#_elastic',
'error-message': '#modal',
);
.example {
animation: fade 1s tools.var-ease('error-message', ease-in);
transition: translate var-ease('modal');
}
.example {
animation: fade 1s var(--ease-error-message, ease-in);
transition: translate var-ease("modal");
}