open-props-scss

Problem: Open Props is super awesome but it leans heavily into PostCSS for things like custom media queries and treeshaking unused props. Sometimes you just want to use a color or shadow without bringing in the whole thing or configuring anything.

Solution: Sass variables! Import the whole thing, use only what you need, the rest will get compiled away. No need for any extra configuration.

Try it on Stackblitz.

Installation

npm i open-props-scss

Usage

Import the package under a namespace:

@use 'open-props-scss' as op;

And start using the props!

Most of the names follow the same naming convention as open props CSS variables, except the -- is replaced with $. You can find the values of all props by inspecting the scss files on npm.

body {
  font-family: op.$font-sans;
}

Shadows are made available through a shadow() function rather than a variable. This allows choosing between light and dark themes, as well as modifying $shadow-color and $shadow-strength if desired.

box-shadow: op.shadow(1);
box-shadow: op.shadow('inner-3', dark);
box-shadow: op.shadow(5, $shadow-color: var(--my-shadow-color));

Animations are made available as mixins rather than a variable. Some animations (e.g. fade-in-bloom and fade-out-bloom) also have a dark theme version, which can be included by passing a dark argument to the mixin.

button {
  @include op.scale-up;
}

section {
  @include op.fade-in-bloom(dark);
}

Custom properties

A common workflow is to assign open props to your own custom properties. This requires interpolating the values inside #{}.

:root {
  --page-bg: #{op.$gray-2};
  --page-text: #{op.$gray-9};

  @media (op.$OSdark) {
    --page-bg: #{op.$gray-9};
    --page-text: #{op.$gray-1};
  }

  background-color: var(--page-bg);
  color: var(--page-text);
}

Unprefixed usage

You can also import the props into the global scope to use them without a prefix. Be careful when doing this as it might cause conflicts with some of your own variables.

@use 'open-props-scss' as *;

:root {
  --page-bg: #{$gray-2};
  --page-text: #{$gray-9};

  @media ($OSdark) {
    --page-bg: #{$gray-9};
    --page-text: #{$gray-1};
  }

  font-family: $font-sans;
  background-color: var(--page-bg);
  color: var(--page-text);
}

Acknowledgements

All I did is convert the tokens to Sass variables. The credit for actually making Open Props goes to Adam Argyle. 💜