Introduction

Generate CSS declaration.

Installing

npm install @sass-collective/css

Usage

@use "@sass-collective/css";

.foo {
    @include css.declaration(color, darkcyan);
}

API

Sass mixins

| Mixin | Description | |------------------------------------------------|--------------------------------------------------------------------------| | declaration($property, $value, $important) | Generate CSS declaration, with optional !important. | | selector($selector, $key, $divider, $suffix) | Add prefix or suffix key on selector, with optional default : divider. |

Add a new declaration with css.declaration()

The following Sass...

@use "@sass-collective/css";

.foo {
    @include css.declaration(color, darkcyan);
    @include css.declaration(font-size, 16px, true);
    @include css.declaration(box-shadow, (0 0 10px 5px rgba(darkcyan, 0.75), inset 0 0 10px 5px rgba(darkcyan, 0.75))); // Use parentheses for declare comma-separated values list.
}

...will produce the following CSS...

.foo {
    color: darkcyan;
    font-size: 16px !important;
    box-shadow: 0 0 10px 5px rgba(darkcyan, 0.75), inset 0 0 10px 5px rgba(darkcyan, 0.75);
}

Add a prefix to selector with css.selector()

The following Sass...

@use "@sass-collective/selector";

@include css.selector(".foo", "md") {
    color: darkcyan;
}

...will produce the following CSS...

.md:foo {
    color: darkcyan;
}

Add a suffix to selector with css.selector()

The following Sass...

@use "@sass-collective/selector";

@include css.selector(".foo", "md", $suffix: true) {
    color: darkcyan;
}

...will produce the following CSS...

.foo:md {
    color: darkcyan;
}

Sass functions

| Function | Description | |------------------|----------------------------------------------| | unpack($value) | Unpacks shorthand values for CSS properties. |

Add a new declaration with css.unpack()

The following Sass...

@use "@sass-collective/css";

.foo {
    margin: css.unpack(10px); // Single value.
    padding: css.unpack(10px 5px); // Two values.
    border-radius: css.unpack(10px 5px 12px); // Three values.
}

...will produce the following CSS...

.foo {
    margin: 10px 10px 10px 10px;
    padding: 10px 5px 10px 5px;
    border-radius: 10px 5px 12px 5px;
}