Boolean
$spacing-disable-everything: false !default;
Number
$spacing-none: 0 !default;
Number
$spacing-xs: 0.25rem !default;
Number
$spacing-sm: 0.5rem !default;
Number
$spacing-md: 1rem !default;
Number
$spacing-lg: 1.5rem !default;
Number
$spacing-xl: 2rem !default;
List
$spacing-variables: (none, xs, sm, md, lg, xl);
mixin
@mixin set-var($name, $value) { … }
mixin
@mixin use-var($property, $name: $property, $fallback: null) { … }
mixin
@mixin variables { … }
function
@function get-var($name, $fallback: null) { … }
String
Set to true
to disable all the spacing variables. You probably don't want to do this.
No spacing. Generally applied as gap
, padding
, or margin
.
Extra Small Spacing. Generally applied as gap
, padding
, or margin
.
Small Spacing. Generally applied as gap
, padding
, or margin
.
Medium Spacing. Generally applied as gap
, padding
, or margin
.
Large Spacing. Generally applied as gap
, padding
, or margin
.
Extra Large Spacing. Generally applied as gap
, padding
, or margin
.
The available configurable css variables and mostly used internally for the
get-var
, set-var
, and use-var
utils.
The supported variable name
The value to set the variable to. Supports null
which will just be a no-op.
The css property to apply the variable to
The supported variable name
An optional fallback value if the variable has not been set
Conditionally applies the css variables based on feature flags
a var()
statement
The supported variable name
An optional fallback value