# @unsass/css

> Composable Sass mixins for managing CSS declarations with optional CSS custom-properties support.

Latest version **3.3.0** (published 2026-09-19) · MIT license · 0 weekly downloads

## Install

```sh
npm install @unsass/css
pnpm add @unsass/css
yarn add @unsass/css
bun add @unsass/css
```

## Health

**Score 65/100 (B)** — status: active.

Positive: esm support; no vulnerabilities; has provenance; recently updated; high maintenance score.

Warnings: low downloads; no types.

## Facts

| | |
|---|---|
| Version | 3.3.0 |
| Published | 2026-09-19 |
| First published | 2022-03-01 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM |
| Node | >=22 |
| Dependencies | 1 |
| Unpacked size | 20.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Provenance | attested (GitHub Actions) |
| GitHub stars | 1 |
| Author | Front Factory |
| Maintainers | bdamevin |
| Keywords | sass, scss, css, declaration, custom-properties, mixins, unsass, front-end |

## Links

- npm: https://www.npmjs.com/package/@unsass/css
- Repository: https://github.com/unsass/css
- Homepage: https://github.com/unsass/css#readme
- Issues: https://github.com/unsass/css/issues
- npm.io page: https://npm.io/package/@unsass/css

## Dependencies (1)

- [@unsass/utilities](https://npm.io/package/@unsass/utilities.md) ^1.3.1

## Alternatives

- [style-dictionary](https://npm.io/package/style-dictionary.md) — 2.0M weekly downloads
- [postcss-merge-idents](https://npm.io/package/postcss-merge-idents.md) — 1.7M weekly downloads
- [@fontsource/noto-sans](https://npm.io/package/@fontsource/noto-sans.md) — 93.0K weekly downloads
- [uglifycss](https://npm.io/package/uglifycss.md) — 71.6K weekly downloads
- [mat4-interpolate](https://npm.io/package/mat4-interpolate.md) — 23.3K weekly downloads

## Recent versions

- 3.3.0 (latest) — 2026-09-19
- 2.2.0-beta.2 (beta) — 2022-08-26
- 3.2.0 — 2026-07-01
- 3.1.0 — 2026-01-03
- 3.0.1 — 2025-12-12
- 3.0.0 — 2025-03-17
- 2.3.0 — 2023-03-06
- 2.2.0 — 2022-09-21
- 2.1.1 — 2022-09-13
- 2.2.0-beta.1 — 2022-08-25
- 2.1.0 — 2022-08-17
- 2.0.3 — 2022-08-17
- 2.0.2 — 2022-06-10
- 2.0.1 — 2022-06-10
- 2.0.0 — 2022-06-10
- … 1 more at https://npm.io/package/@unsass/css/versions

## README

# CSS

[![Version](https://flat.badgen.net/npm/v/@unsass/css)](https://www.npmjs.com/package/@unsass/css)
[![Downloads](https://flat.badgen.net/npm/dt/@unsass/css)](https://www.npmjs.com/package/@unsass/css)
[![License](https://flat.badgen.net/npm/license/@unsass/css)](https://www.npmjs.com/package/@unsass/css)

## Introduction

CSS is a lightweight Sass toolkit that provides composable mixins for authoring and managing CSS property declarations.
Use it to emit direct declarations or map values to CSS custom-properties so style tokens are consistent and
configurable across a project.

<div align="center">

![CSS](.github/banner.svg)

</div>

## Installing

```shell
npm install @unsass/css
```

## Usage

```scss
@use "@unsass/css";

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

## Mixins

### `declaration($property, $value, $important)`

Sets a CSS declaration, with optional `!important`. Accepts a custom-property record (see `custom-properties.create()`
below) as either the property or the value to read or write a CSS custom property.

```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))); // Comma-separated values list.
}
```

```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);
}
```

#### With a custom property

```scss
@use "@unsass/css";
@use "@unsass/css/custom-properties";

.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)));
}
```

```css
.foo {
    --foo: darkcyan;
    color: var(--foo, darkcyan);
    color: var(--foo, var(--bar, darkcyan));
}
```

### `selector($key, $separator, $suffix, $selector)`

Builds a suffixed class selector from a key, useful for generating responsive class variants (e.g. `lg:foo` or
`foo:lg`) without repeating the base selector.

```scss
@use "@unsass/css";

.foo {
    @include css.selector(md) {
        background: darkcyan;
    }
}
```

```css
.md:foo {
    background: darkcyan;
}
```

```scss
@use "@unsass/css";

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

```css
.foo:md {
    background: darkcyan;
}
```

## Custom properties

Import `@unsass/css/custom-properties` to build custom-property records consumed by `css.declaration()`.

### `create($name, $fallback)`

Builds a custom-property record from a name and an optional fallback, ready to be resolved with `create-var()`.

```scss
@use "@unsass/css/custom-properties";

$prop: custom-properties.create(--foo, darkcyan);
// (varname: --foo, fallback: darkcyan)
```

### `get-varname($custom-prop)`

Returns the variable name of a custom-property record.

```scss
@use "@unsass/css/custom-properties";

$name: custom-properties.get-varname(custom-properties.create(--foo)); // "--foo"
```

### `get-fallback($custom-prop)`

Returns the fallback of a custom-property record.

```scss
@use "@unsass/css/custom-properties";

$fallback: custom-properties.get-fallback(custom-properties.create(--foo, darkcyan)); // darkcyan
```

### `is-custom-prop($value)`

Returns whether a value is a custom-property record built by `create()`.

```scss
@use "@unsass/css/custom-properties";

$is-prop: custom-properties.is-custom-prop(custom-properties.create(--foo)); // true
$is-prop: custom-properties.is-custom-prop(darkcyan); // false
```

### `create-var($custom-prop)`

Resolves a custom-property record into a `var()` expression, chaining nested fallback custom-properties.

```scss
@use "@unsass/css/custom-properties";

$var: custom-properties.create-var(custom-properties.create(--foo, darkcyan)); // var(--foo, darkcyan)
```

---
_Source: https://npm.io/package/@unsass/css · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._