Neurotic Pumpkin Murderer


    7.0.0-rc.7 • Public • Published

    Scarab Core

    Sass library for rapid stylesheet development

    Design token management · Responsive mixins · Helper functions

    npm-beta Build Status

    💿 Installation · 📚 Documentation · ⭐️ Features · 🍃 Ecosystem
    🎉 Motivation · ❤️ Contributing · 📃️ License

    💿 Installation

    1. Install Scarab Core as a dev-dependency:
    # With yarn
    $ yarn add @scarab/core -D
    # Or with npm
    $ npm install @scarab/core --save-dev
    1. Add node_modules/ to your Sass includePaths.

    2. Import the Scarab Core library before all other stylesheets:

    // Import the Scarab Library
    @import '@scarab/core/_';
    // Write your Sass here...

    📚 Documentation

    API documentation and guides:

    ⭐️ Features

    Design token management

    Design systems consist of reusable “tokens”. Each token has a name and a value associated with it. Constructing digital interfaces using only the values of tokens that are defined in a design system ensures visual consistency. Scarab provides a simple interface for managing design tokens.

    Helper functions

    Provides additional syntactic sugar on top of the default Sass functions.

    Responsive mixins

    Simplifies working with breakpoints and media queries.

    🍃 Ecosystem

    In addition to the core library, the following packages are available in the Scarab ecosystem:

    Package name Description
    Carapace CSS utility class generator
    Scarab CLI (WIP) Command-line tools for the Scarab ecosystem
    Scarab snippets (WIP) Scarab snippets for your favorite text editors and IDE's

    🎉 Motivation

    Why another Sass library?

    Scarab is the resulting by-product of years of web development work. It's designed and built as a library to manage design tokens and to provide additional syntactic sugar for writing stylesheets.

    Why use Scarab?

    • Define design tokens in Sass (ideal since it's a styling language)
    • Use tokens in Sass with Scarab, and in HTML with Carapace
    • Ability to export design tokens from Sass to JSON
    • Written in Sass; No additional dependencies
    • Well tested with 100+ unit tests
    • Ecosystem of related packages

    Why not just use Sass variables?

    Using Sass variables to manage design tokens can be a viable solution for small projects. However, this approach has its limitations. For instance, in Sass, it's not possible to dynamically reference a variable by name. On the other hand, this becomes possible if tokens are stored in a Sass map instead of variables. This opens up many possibilities, and is the main impetus behind the Scarab library.

    Alternative libraries

    Other options are available, and you should pick one that caters to your project's requirements.

    • Tailwind — Generates CSS utility classes with short compile time. Requires PostCSS or Tailwind CLI.
    • Tachyons — Good for smaller sites that use native CSS variables (a.k.a. custom properties).
    • BassCSS — Alternative to Tachyons. Also uses CSS variables.
    • Vue DS — Full-featured design system framework for Vue.

    ❤️ Contributing

    Issues and feature requests and PR's are welcome!

    📃️ License

    Licensed under BSD 3-Clause. Copyright © Kyle Oliveiro 2018.


    npm i @scarab/core

    DownloadsWeekly Downloads






    Unpacked Size

    290 kB

    Total Files


    Last publish


    • kyleoliveiro