scss-validate - Safe SASS validation library

Make your SCSS/SASS safer with scss-validate. Define a schema for your data and ensure users use it correctly!

• 🔒 Bulletproof error-checking makes sure you (or your users) don't miss a thing!
• 🚀 No runtime! It's all just SCSS. You'll see the error before it's too late
• 🎭 Make it your own! All labels / prefixes can be changed to represent your library
• 🌈 Beautiful, customizable error messages
• ✅ Tested with Vitest and the sass compiler

[!NOTE]
Documentation and reference are now available on our website, scss-validate.dev. For a quick intro into scss-validate, check out scss-validate.dev/intro

installation

scss-validate is available as an npm package

# npm
npm install scss-validate
# pnpm
pnpm add scss-validate

or via a CDN like unpkg. To load it from a CDN, just @use it in your Sass file:

@use 'https://unpkg.com/scss-validate@latest' as s;

introduction

@use 'scss-validate' as s;

$my-number-schema: s.number(
  $gte: 18,
);

$my-string-schema: s.string(
  $min-length: '4',
  $starts-with: 'su',
  $ends-with: 'mi',
);

@include s.validate($my-number-schema, 15); // Oh-oh, an error!
@include s.validate($my-string-schema, 'tofu'); // No way!

You will recognize many of the properties - they are simple strings similar to 'zod' or 'yup'. And if you do put a wrong one.. We got you covered!

[scss-validate] `string.min` is not a valid validator. Allowed validators are: [eq, in, not-in, contains, not-contains, ... max-length, min-length]

All scss-validate methods are validated themselves - leaving zero room for errors. Of course, validation errors look just as nice:

[scss-validate] Value must be greater than or equal to 18

For a full introduction, visit our docs, or check out the reference