css-vars-media

Easily define custom properties and their variants

Installation

$ npm install css-vars-media

Usage

1. Import css-vars-media.

@import '~css-vars-media/lib/css-vars-media.scss';

2. Define your media queries rules.

$medias: (
  sm-up: 'screen and (min-width: 576px)',
  md-up: 'screen and (min-width: 768px)',
);

3. Define your custom properties and their variants.

$theme: (
  --container-gutter: (
    '20px',
    (
      sm-up: '40px',
      md-up: '60px',
    )
  ),
  --map-height: (
    '320px',
    (
      sm-up: '400px',
      md-up: '560px',
    )
  ),
);

4. Finally, use css-vars-media mixin to generate all custom properties.

@include css-vars-media($theme, $medias);

API

$medias

List of all medias queries used for @css-vars-media $theme parameter.

Type: map

• key: string [unquoted] - (Media query alias)
• value: string [quoted] - (Media query rule)

Example:

$medias: (
  portrait: '(orientation: portrait)',
  landscape: '(orientation: landscape)',
);

$theme

List of all custom properties and their variants.

Type: map

• key: string [unquoted] - (Custom property)
• value: list [2 values]
  • 1st value: string [quoted] - (Default value)
  • 2nd value: map
    • key: string [unquoted] - (Media query alias)
    • value: string [quoted] - (Variant value)

Example:

$theme: (
  --my-custom-variable: (
    'blue',
    (
      sm-up: 'red',
      md-up: 'green'
    )
  ),
);

@css-vars-media(theme, medias)

Mixin used to generate all custom properties.

Type: mixin

Refer to $theme and $medias.

Support

See current support for Custom Properties.

License

MIT