A shorter SCSS access to CSS custom properties.
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src/functions
.editorconfig
.gitignore
LICENSE
README.md
package.json

README.md

v.scss

v.scss brings a unique SCSS function that allows easier access to CSS custom properties using v(propName) instead of var(--propName).

Yup, v purpose is better readability by saving you 4 characters. It’s all it does.

Installation

  1. npm install v.scss pulls the package into your project.
  2. @import '~v.scss'; in a SCSS files make v() available.

Usage

Start by defining some CSS custom properties:

:root {
  --primary: #000;
  --bg: #fff;
}

Then, access them with v().

html {
  background: v(bg);
  color: v(primary);
}

That’s it! This will generates regular CSS:

html {
  background: var(--bg);
  color: var(--primary);
}

Fallback value as optional second parameter

The CSS var() function can take a fallback as second parameter: if the wanted custom property isn’t defined or valid for the browser, this parameter will be used.

In the following example, the background color will be #433221, the text will receive the yellow color and links the cyan one.

:root {
  --primary: cyan;
  --bg: #433221;
}

html {
  background: v(bg, brown); // `background: var(--bg, brown);`
  color: v(primaryyyy, yellow); // `color: var(--primary, yellow);`
}

a {
  color: v(primary); // color: var(--primary);
}

View it on CodePen.

See also