varss

A scss library for working with CSS Variables

Install

npm i varss -D

Usage

Basically you make use of a mixin var-set for variable definition in conjunction with a function var-get for accessing your variable as css custom property. You can pass in maps as well and get back maps containing css variables then accordingly.

Here's a complete example...

// variables.scss
$var-prefix: prefix-;
$var-style: camelCase;

:root {
  @include var-set((
    borderWidth: 1px,
    borderRadius: 3px,
    fontSize: 12px,
    context: (
      primary: blue,
      secondary: orange
    ),
    inverse: (
      primary: white,
      secondary: black
    )
  ));
}

// Button.scss
.Button {
  -webkit-appearance: none;
  cursor: pointer;
  padding: 0.25rem 0.1rem;
  border-style: solid;
  border-radius: var-get('borderRadius');
  border-width: var-get('borderWidth');
  font-size: var-get('fontSize');

  // You may either refer to variables by their flat name...
  &--outline#{&}--primary {
    border-color: var-get('contextPrimary');
    color: var-get('contextPrimary');
  }

  &--outline#{&}--secondary {
    border-color: var-get('contextSecondary');
    color: var-get('contextSecondary');
  }

  // Or access lists and maps as specified via `var-set`
  @each $name, $value in var-get('context') {
    &--#{$name}:not(&--outline) {
      border-color: $value;
      background: $value;
      color: map-get(var-get('inverse'), $name);
    }
  }
}

Output:

:root {
  --prefix-borderWidth: 1px;
  --prefix-borderRadius: 3px;
  --prefix-fontSize: 12px;
  --prefix-contextPrimary: blue;
  --prefix-contextSecondary: orange;
  --prefix-inversePrimary: white;
  --prefix-inverseSecondary: black;
}

.Button {
  -webkit-appearance: none;
  cursor: pointer;
  padding: 0.25rem 0.1rem;
  border-style: solid;
  border-radius: var(--prefix-borderRadius);
  border-width: var(--prefix-borderWidth);
  font-size: var(--prefix-fontSize);
}

.Button--outline.Button--primary {
  border-color: var(--prefix-contextPrimary);
  color: var(--prefix-contextPrimary);
}

.Button--outline.Button--secondary {
  border-color: var(--prefix-contextSecondary);
  color: var(--prefix-contextSecondary);
}

.Button--primary:not(.Button--outline) {
  border-color: var(--prefix-contextPrimary);
  background: var(--prefix-contextPrimary);
  color: var(--prefix-inversePrimary);
}

.Button--secondary:not(.Button--outline) {
  border-color: var(--prefix-contextSecondary);
  background: var(--prefix-contextSecondary);
  color: var(--prefix-inverseSecondary);
}

Note: varss is intented for being used at application level and is currently not suited for being incorporated into a dedicated scss library

Development

In order to run specs, issue the following from your terminal:

npm test

Run dev-server

npm start

Create a build (for whatever purpose)

npm run build