scss-semantic-slots

0.1.1 • Public • Published

SCSS semantic slots

Semantic slots allow labeling of CSS property values with context friendly notation e.g. slot.get("body.text.primary")

Usage

theme.scss

@use "~scss-semantic-slots/index" as slot;

$theme: (
    body: (
        background: #fff,
        text: (
            primary: #000,
            secondary: #ff0000,
        ),
    ),
);

@function get($key) {
    @return slot.map-slots($theme, $key);
}

site.scss

@use "theme" as theme;

body {
    background: theme.get("body.background");
    color: theme.get("body.text.primary");
}

Readme

Keywords

none

Package Sidebar

Install

npm i scss-semantic-slots

Weekly Downloads

1

Version

0.1.1

License

MIT

Unpacked Size

1.67 kB

Total Files

3

Last publish

Collaborators

  • upnxt