Jump To:

  1. Variables
    1. $config
  2. Mixins
    1. set()
    2. declare()
    3. declare-all()
    4. declare-breakpoint()
    5. declare-breakpoint-sizes()
    6. declare-theme-values()
    7. declare-ulu()
  3. Functions
    1. get()
    2. name()
    3. use()
    4. join()
    5. add()
    6. subtract()
    7. name-ulu()
    8. use-ulu()

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-103

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. Can be a literal or a configuration map with value and breakpoints keys.
$prefix String Override default prefix $config.prefix

Require

declare-all()

Mixin

Outputs a map as custom properties. Supports mapping values to breakpoints.

File Information
  • File: _cssvar.scss
  • Group: cssvar
  • Type: mixin
  • Lines (comments): 105-122
  • Lines (code): 124-130

Examples

Declare each property in a map as a custom property

:root {
  @include ulu.cssvar-declare-all((
    "base-color" : red,
    "responsive-color" : (
      "value" : blue,
      "breakpoints" : (
        "medium" : (
          "direction" : "up",
          "value" : green
        )
      )
    )
  ));
}

Parameters

Name Type Description Default
$props Map Properties to declare. Values can be literal or a configuration map with value and breakpoints keys.
$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): 132-140
  • Lines (code): 142-154

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): 156-163
  • Lines (code): 165-176

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

Deprecated

Moved to themes core module (themes.declare-values()). This will be removed in a future version.

File Information
  • File: _cssvar.scss
  • Group: cssvar
  • Type: mixin
  • Lines (comments): 178-182
  • Lines (code): 183-191

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

declare-ulu()

Mixin

Convenience method that maps to "declare" mixin, sets "ulu" as prefix.

  • Used mostly internally
File Information
  • File: _cssvar.scss
  • Group: cssvar
  • Type: mixin
  • Lines (comments): 250-251
  • Lines (code): 253-255

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

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
  • Accepts standard names (applies prefix) or raw "var(...)" / "calc(...)" strings
  • Accepts raw values (numbers like 100vh) so they can be used in calculations
File Information
  • File: _cssvar.scss
  • Group: cssvar
  • Type: function
  • Lines (comments): 193-199
  • Lines (code): 201-218

Parameters

Name Type Description
$names List list of names (string) or raw custom properties or calc (chaining support or custom math)
$separator String Separator to use when joining (+, -)

Returns

Type Description
String For example if separator was "+" would result in "var(--some-prop) + var(--another-prop)"

Require

  • is-string()
  • is-number()
  • 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): 220-222
  • Lines (code): 224-226

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): 228-230
  • Lines (code): 232-234

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

name-ulu()

Function

Convenience method that maps to "name" function, sets "ulu" as prefix.

  • Used mostly internally
File Information
  • File: _cssvar.scss
  • Group: cssvar
  • Type: function
  • Lines (comments): 236-237
  • Lines (code): 239-241

Require

use-ulu()

Function

Convenience method that maps to "use" function, sets "ulu" as prefix.

  • Used mostly internally
File Information
  • File: _cssvar.scss
  • Group: cssvar
  • Type: function
  • Lines (comments): 243-244
  • Lines (code): 246-248

Require