A shorter SCSS access to CSS custom properties.
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.



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.


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


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