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. |
css.declaration()
Add a new declaration with 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);
}
css.selector()
Add a prefix to selector with The following Sass...
@use "@sass-collective/selector";
@include css.selector(".foo", "md") {
color: darkcyan;
}
...will produce the following CSS...
.md:foo {
color: darkcyan;
}
css.selector()
Add a suffix to selector with 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. |
css.unpack()
Add a new declaration with 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;
}