Cssvar
Provides support for custom-properties implementations
Variables
$config
Variable Type: Map
Module Settings
$config: (
"prefix" : ""
);File Information
- File: _cssvar.scss
- Group: cssvar
- Type: variable
- Lines (comments): 14-16
- Lines (code): 18-20
Map Properties
| Name | Type | Default | Description |
|---|---|---|---|
| prefix | String | "" | Default prefix, will be added to all custom properties when using mixin or functions, unless overridden, set to empty quotes to disable |
Mixins
set()
Mixin
Change modules $config
File Information
- File: _cssvar.scss
- Group: cssvar
- Type: mixin
- Lines (comments): 22-25
- Lines (code): 27-29
Examples
Setting the prefix to 'ulu'
@include ulu.cssvar-set(( "prefix" : "ulu" ));Parameters
| Name | Type | Description |
|---|---|---|
| $changes | Map |
Map of changes |
Require
declare()
Mixin
Outputs a single custom property declaration
File Information
- File: _cssvar.scss
- Group: cssvar
- Type: mixin
- Lines (comments): 74-81
- Lines (code): 83-85
Examples
Declare a custom property
:root {
@include ulu.cssvar-declare("base-color", red);
}Parameters
| Name | Type | Description | Default |
|---|---|---|---|
| $name | String |
Name of property | |
| $value | * |
The properties value to declare | |
| $prefix | String |
Override default prefix | $config.prefix |
Require
declare-all()
Mixin
Outputs a map as custom properties
File Information
- File: _cssvar.scss
- Group: cssvar
- Type: mixin
- Lines (comments): 87-93
- Lines (code): 95-99
Examples
Declare each property in a map as a custom property
:root {
@include ulu.cssvar-declare($colors);
}Parameters
| Name | Type | Description | Default |
|---|---|---|---|
| $props | Map |
Properties to declare | |
| $prefix | String |
Override default prefix | $config.prefix |
Require
declare-breakpoint()
Mixin
Declare a custom property for current breakpoint
File Information
- File: _cssvar.scss
- Group: cssvar
- Type: mixin
- Lines (comments): 101-109
- Lines (code): 111-123
Examples
Declare each property in a map as a custom property
:root {
@include ulu.cssvar-declare-breakpoint();
}Parameters
| Name | Type | Default | Description |
|---|---|---|---|
| $breakpoints | Map |
breakpoint.get-sizes() | Breakpoints to declare |
| $name | String |
"breakpoint" | Name to use for custom property |
| $initial | Map |
breakpoint.get("null-name") | The value for the custom property when not within breakpoint |
| $prefix | String |
$config.prefix | Override default prefix |
Require
declare-breakpoint-sizes()
Mixin
Declare a custom property for each breakpoint size
File Information
- File: _cssvar.scss
- Group: cssvar
- Type: mixin
- Lines (comments): 125-132
- Lines (code): 134-145
Examples
Declare each property in a map as a custom property
:root {
@include ulu.cssvar-declare-breakpoint-sizes();
}Parameters
| Name | Type | Default | Description |
|---|---|---|---|
| $breakpoints | Map |
breakpoint.get-sizes() | Breakpoints to declare |
| $name | String |
"breakpoint-size-" | Name to use for custom property (prefixes size name) |
| $prefix | String |
$config.prefix | Override default prefix |
Require
declare-theme-values()
Mixin
Outputs css vars for a specific type from a theme map
File Information
- File: _cssvar.scss
- Group: cssvar
- Type: mixin
- Lines (comments): 147-168
- Lines (code): 170-177
Examples
Example of theme map and usage
// Defining a map to hold my color theme values
$color-themes: (
"color-button" : (
"light" : blue,
"dark" : red
), ...
);
// Declaring default theme
:root {
@include ulu.cssvar-declare-theme-values($color-themes, "light");
}
// Creating class to use on body/other elements to switch to dark theme
.theme-dark {
@include ulu.cssvar-declare-theme-values($color-themes, "dark");
}Parameters
| Name | Type | Description |
|---|---|---|
| $theme | Map |
The map containing the values. Example ( |
| $key | String |
The key used to retrieve values from the map. |
| $prefix | String |
The optional prefix for CSS variables. |
Require
Functions
get()
Function
Get a config option
File Information
- File: _cssvar.scss
- Group: cssvar
- Type: function
- Lines (comments): 31-35
- Lines (code): 37-39
Examples
Getting the config value for prefix
$prefix: ulu.cssvar-get("prefix");Parameters
| Name | Type | Description |
|---|---|---|
| $name | String |
Name of property |
Returns
| Type | Description |
|---|---|
| * | Map property value |
Require
- require-map-get()
- $config
name()
Function
Get a custom property name (with optional prefix)
File Information
- File: _cssvar.scss
- Group: cssvar
- Type: function
- Lines (comments): 41-46
- Lines (code): 48-54
Examples
Getting a custom property name
#{ ulu.cssvar-name("base-color") } { ... }Parameters
| Name | Type | Description | Default |
|---|---|---|---|
| $name | String |
Name of custom property | |
| $prefix | String |
Override default prefix | $config.prefix |
Returns
| Type | Description |
|---|---|
| String | The formatted property name (unquoted string) |
use()
Function
Function to use a custom property within a declaration value
File Information
- File: _cssvar.scss
- Group: cssvar
- Type: function
- Lines (comments): 56-64
- Lines (code): 66-72
Examples
Print an custom property as a value
.test {
color: ulu.cssvar-use("base-color");
}Parameters
| Name | Type | Description | Default |
|---|---|---|---|
| $name | String |
Name of custom property | |
| $default-value | String |
Provide a default value for var() | null |
| $prefix | String |
Override default prefix | $config.prefix |
Returns
| Type | Description |
|---|---|
| String | Formatted custom property for use in property value (ie. var(...)) |
Require
join()
Function
Joins a list of cssvar names
- Use to "+", "-" and then use in calc
File Information
- File: _cssvar.scss
- Group: cssvar
- Type: function
- Lines (comments): 179-183
- Lines (code): 185-191
Parameters
| Name | Type | Description |
|---|---|---|
| $names | List |
list of names (string), like if using use |
| $separator | String |
Separator to use when joining custom property var statements |
Returns
| Type | Description |
|---|---|
| String | For example if separator was "+" would result in "var(--some-prop) + var(--another-prop)" |
Require
- use()
- list-join()
add()
Function
For any names passed will join them with "+" and wrap in calc
File Information
- File: _cssvar.scss
- Group: cssvar
- Type: function
- Lines (comments): 193-195
- Lines (code): 197-199
Parameters
| Name | Type | Description |
|---|---|---|
| $name | String |
Name string (pass multiple comma separated) |
Returns
| Type | Description |
|---|---|
| String | A string like "calc(var(--some-prop) + var(--another-prop))" |
Require
subtract()
Function
For any names passed will join them with "-" and wrap in calc
File Information
- File: _cssvar.scss
- Group: cssvar
- Type: function
- Lines (comments): 201-203
- Lines (code): 205-207
Parameters
| Name | Type | Description |
|---|---|---|
| $name | String |
Name string (pass multiple comma separated) |
Returns
| Type | Description |
|---|---|
| String | A string like "calc(var(--some-prop) - var(--another-prop))" |