https://github.com/unsass/css
Sass mixins to manage CSS declarations.
https://github.com/unsass/css
css custom-properties declaration sass
Last synced: 5 months ago
JSON representation
Sass mixins to manage CSS declarations.
- Host: GitHub
- URL: https://github.com/unsass/css
- Owner: unsass
- License: mit
- Created: 2022-03-01T15:54:13.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2025-08-01T06:12:40.000Z (6 months ago)
- Last Synced: 2025-08-08T23:49:47.183Z (5 months ago)
- Topics: css, custom-properties, declaration, sass
- Language: SCSS
- Homepage: https://main.d2q97n2mx9hy2z.amplifyapp.com/guide/css/getting-started.html
- Size: 1.34 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE.md
Awesome Lists containing this project
README
# CSS
[](https://www.npmjs.com/package/@unsass/css)
[](https://www.npmjs.com/package/@unsass/css)
[](https://www.npmjs.com/package/@unsass/css)
## Introduction
Sass mixins to manage CSS declarations with custom properties option.
## Installing
```shell
npm install @unsass/css
```
## Usage
```scss
@use "@unsass/css";
.foo {
@include css.declaration(color, darkcyan);
}
```
## API
### Sass mixins
| Mixin | Description |
|----------------------------------------------|-------------------------------------------------------|
| `declaration($property, $value, $important)` | Sets new CSS declaration, with optional `!important`. |
#### Add a new declaration with `css.declaration()`
The following Sass...
```scss
@use "@unsass/css";
.foo {
@include css.declaration(color, darkcyan); // Standard declaration.
@include css.declaration(font-size, 16px, true); // Declaration with `!important`.
@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...
```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 custom property declaration with `css.declaration()`
The following Sass...
```scss
@use "@unsass/css";
@use "@unsass/css/custom-porperties";
.foo {
@include css.declaration(custom-properties.create(--foo, darkcyan));
@include css.declaration(color, custom-properties.create(--foo, darkcyan));
@include css.declaration(color, custom-properties.create(--foo, custom-properties.create(--bar, darkcyan)));
}
```
...will produce the following CSS...
```css
.foo {
--foo: darkcyan;
color: var(--foo, darkcyan);
color: var(--foo, var(--bar, darkcyan));
}
```