https://github.com/unsass/css

Sass mixins to manage CSS declarations.
https://github.com/unsass/css

css custom-properties declaration sass

Last synced: 16 days 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 3 years ago)
• Default Branch: main
• Last Pushed: 2023-06-01T06:59:10.000Z (over 1 year ago)
• Last Synced: 2025-01-20T10:48:35.602Z (19 days ago)
• Topics: css, custom-properties, declaration, sass
• Language: SCSS
• Homepage: https://main.d2q97n2mx9hy2z.amplifyapp.com/guide/css/getting-started.html
• Size: 1.69 MB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 6
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE.md

Awesome Lists containing this project

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

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

}

```