open-index/open-npm huggingface dataset:
npm package: @sass-collective/css
Description: Generate CSS declaration.
Author: The Sass Collective Authors
Latest version: 3.0.0

<div align="center">

![Sass CSS](.github/logo.svg)

</div>

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

## Introduction

Generate CSS declaration.

## Installing

```shell
npm install @sass-collective/css
```

## Usage

```scss
@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...

```scss
@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...

```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...

```scss
@use "@sass-collective/selector";

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

...will produce the following CSS...

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

#### Add a suffix to selector with `css.selector()`

The following Sass...

```scss
@use "@sass-collective/selector";

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

...will produce the following CSS...

```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...

```scss
@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...

```css
.foo {
    margin: 10px 10px 10px 10px;
    padding: 10px 5px 10px 5px;
    border-radius: 10px 5px 12px 5px;
}
```
npm package: @sass-collective/direction
Description: Manage content direction for languages right-to-left or left-to-right rules.
Author: The Sass Collective Authors
Latest version: 4.0.1

<div align="center">

![Sass Direction](.github/logo.svg)

</div>

[![Version](https://flat.badgen.net/npm/v/@sass-collective/direction)](https://www.npmjs.com/package/@sass-collective/direction)
[![Downloads](https://flat.badgen.net/npm/dt/@sass-collective/direction)](https://www.npmjs.com/package/@sass-collective/direction)
[![License](https://flat.badgen.net/github/license/sass-collective/sass-collective)](https://flat.badgen.net/github/license/sass-collective/sass-collective)

## Introduction

Manage content direction for languages `right-to-left` or `left-to-right` rules.

## Installing

```shell
npm install @sass-collective/direction
```

## Usage

```scss
@use "@sass-collective/direction";
```

### Tokens

| Key   | Description                                   |
|-------|-----------------------------------------------|
| `rtl` | Sets CSS rules for `right-to-left` direction. |
| `ltr` | Sets CSS rules for `left-to-right` direction. |

## API

### Sass mixins

| Mixin                                | Description                                                                               |
|--------------------------------------|-------------------------------------------------------------------------------------------|
| `styles($direction, $root-selector)` | Sets direction rule with optional `$root-selector` option. Default `$direction` is `rtl`. |

#### Add direction rule with `direction.styles()`

The following Sass...

```scss
@use "@sass-collective/direction";

.foo {
    @include direction.styles {
        margin-left: 0;
        margin-right: 20px;
    }

    @include direction.styles(ltr) {
        margin-left: 20px;
        margin-right: 0;
    }

    @include direction.styles($root-selector:. bar) {
        margin-left: 0;
        margin-right: 20px;
    }
}
```

...will produce the following CSS...

```css
[dir="rtl"] .foo {
    margin-left: 0;
    margin-right: 20px;
}

[dir="ltr"] .foo {
    margin-left: 20px;
    margin-right: 0;
}

[dir="rtl"] .bar .foo {
    margin-left: 0;
    margin-right: 20px;
}
```
npm package: @sass-collective/grid
Description: Sass grid classes generator.
Author: The Sass Collective Authors
Latest version: 1.5.0

<div align="center">

![Sass Grid](.github/logo.svg)

</div>

[![Version](https://flat.badgen.net/npm/v/@sass-collective/grid)](https://www.npmjs.com/package/@sass-collective/grid)
[![Downloads](https://flat.badgen.net/npm/dt/@sass-collective/grid)](https://www.npmjs.com/package/@sass-collective/grid)
[![License](https://flat.badgen.net/npm/license/@sass-collective/grid)](https://www.npmjs.com/package/@sass-collective/grid)

## Introduction

Sass grid classes generator.

## Installing

```shell
npm install @sass-collective/grid
```

## Usage

```scss
@use "@sass-collective/grid";
```

### Styles

```scss
@use "@sass-collective/grid/styles";
```

## API

_Coming soon..._
npm package: @sass-collective/property
Description: Generate CSS property with CSS custom properties option.
Author: The Sass Collective Authors
Latest version: 4.7.0

<div align="center">

![Sass Property](.github/logo.svg)

</div>

[![Version](https://flat.badgen.net/npm/v/@sass-collective/property)](https://www.npmjs.com/package/@sass-collective/property)
[![Downloads](https://flat.badgen.net/npm/dt/@sass-collective/property)](https://www.npmjs.com/package/@sass-collective/property)
[![License](https://flat.badgen.net/github/license/sass-collective/sass-collective)](https://flat.badgen.net/github/license/sass-collective/sass-collective)

## Introduction

Generate CSS property with CSS Custom Properties option.

## Installing

```shell
npm install @sass-collective/property
```

## Usage

```scss
@use "@sass-collective/property";
@use "@sass-collective/property/custom-properties";

:root {
    @include property.declaration(custom-properties.create(--foo, darkcyan));
    // --foo: darkcyan;
}

.foo {
    @include property.declaration(color, custom-properties.create(--foo, darkcyan));
    // color: var(--foo, darkcyan);
    
    @include property.declaration(color, custom-properties.create(--foo, custom-properties.create(--bar, darkcyan)));
    // color: var(--foo, var(--bar, darkcyan));
}

.bar {
    @include property.declaration(color, darkcyan);
    // color: darkcyan;
}
```

## API

### Sass mixins

| Mixin                                        | Description                                       |
|----------------------------------------------|---------------------------------------------------|
| `declaration($property, $value, $important)` | Declare CSS property, with optional `!important`. |

## Packages

| Package                                                                                                                                             | Description                    |
|-----------------------------------------------------------------------------------------------------------------------------------------------------|--------------------------------|
| [`@sass-collective/property/custom-properties`](https://github.com/sass-collective/sass-collective/blob/master/packages/property/custom-properties) | Declare CSS Custom Properties. |
npm package: @sass-collective/sass-box-sizing
Description: Generate global CSS box-sizing.
Author: The Sass Collective Authors
Latest version: 1.1.0

# Sass Box Sizing

Generate global CSS box-sizing.

## Install

    npm install @sass-collective/sass-box-sizing --save

## Usage

### Module System

    @use "@sass-collective/sass-box-sizing"
    
    @include sass-box-sizing.box-sizing();
    
### Legacy @import

    @import "@sass-collective/sass-box-sizing"
    
    @include sass-box-sizing();
    
### CSS

    * {
        box-sizing: border-box;
    }
    
    *::before,
    *::after {
        box-sizing: inherit;
    }
    
## Options

* ``border`` _(default)_
* ``content``
npm package: @sass-collective/sass-em
Description: Sass function & mixin to generate em value.
Author: The Sass Collective Authors
Latest version: 1.7.0
Deprecated: This package has been deprecated, use @sass-collective/em instead.

![Sass Em](.github/banner.png)

[![Version](https://flat.badgen.net/npm/v/@sass-collective/sass-em)](https://www.npmjs.com/package/@sass-collective/sass-em)
[![Download](https://flat.badgen.net/npm/dt/@sass-collective/sass-em)](https://www.npmjs.com/package/@sass-collective/sass-em)
[![License](https://flat.badgen.net/npm/license/@sass-collective/sass-em)](https://www.npmjs.com/package/@sass-collective/sass-em)

> **DEPRECATED:** this package has been moved to new reference in Sass Collective [monorepo](https://github.com/sass-collective/sass-collective/tree/master/packages/em) `@sass-collective/em`, use this package because the current repository is no more maintained.

## Introduction

Sass function & mixin to generate em value.

## Install

    npm install @sass-collective/sass-em --save

## Usage

### Function

```scss
em($values, $context);
```

### Mixin

```scss
em($property, $values, $context);
```

### Module System

```scss
@use "@sass-collective/sass-em";

// Function

html,
body {
    // Single value
    font-size: sass-em.em(16, 16);
    
    // Multiple values
    margin: sass-em.em(20 30, 16);
}

// Mixin

html,
body {
    // Single value
    @include sass-em.em(font-size, 16, 16);
    
    // Multiple values
    @include sass-em.em(margin, 20 30, 16);
}
```

### Legacy @import

```scss
@import "@sass-collective/sass-em";

// Function

html,
body {
    font-size: sass-em(16, 16);
    margin: sass-em(20 30, 16);
}

// Mixin

html,
body {
    @include sass-em(font-size, 16, 16);
    @include sass-em(margin, 20 30, 16);
}
```

### CSS

```css
html,
body {
    font-size: 1em;
    margin: 1.25em 1.875em;
}
```
npm package: @sass-collective/sass-rem
Description: Sass function & mixin to generate rem value.
Author: The Sass Collective Authors
Latest version: 1.7.0
Deprecated: This package has been deprecated, use @sass-collective/rem instead.

![Sass Rem](.github/banner.png)

[![Version](https://flat.badgen.net/npm/v/@sass-collective/sass-rem)](https://www.npmjs.com/package/@sass-collective/sass-rem)
[![Download](https://flat.badgen.net/npm/dt/@sass-collective/sass-rem)](https://www.npmjs.com/package/@sass-collective/sass-rem)
[![Quality](https://flat.badgen.net/codacy/grade/0f9f3808eaa94177a98bd46b035410db)](https://app.codacy.com/gh/sass-collective/sass-rem)
[![License](https://flat.badgen.net/npm/license/@sass-collective/sass-rem)](https://www.npmjs.com/package/@sass-collective/sass-rem)

> **DEPRECATED:** this package has been moved to new reference in Sass Collective [monorepo](https://github.com/sass-collective/sass-collective/tree/master/packages/rem) `@sass-collective/rem`, use this package because the current repository is no more maintained.

## Introduction

Sass function & mixin to generate rem value.

## Install

    npm install @sass-collective/sass-rem --save

## Usage

### Function

```scss
rem($values);
```

### Mixin

```scss
rem($property, $values);
```

### Variables

| Names            | Values    |
| ---------------- | --------- |
| ``$baseline``    | 16        |

### Update default context in global

```scss
@use "@sass-collective/sass-rem" with (
    $baseline: 16
);
```

### Module System

```scss
@use "@sass-collective/sass-rem";

// Function

html,
body {
    // Single value
    font-size: sass-rem.rem(16);
    
    // Multiple values
    margin: sass-rem.rem(20 30);
}

// Mixin

html,
body {
    // Single value
    @include sass-rem.rem(font-size, 16);
    
    // Multiple values
    @include sass-rem.rem(margin, 20 30);
}
```

### Legacy @import

```scss
@import "@sass-collective/sass-rem";

// Function

html,
body {
    font-size: sass-rem(16);
    margin: sass-rem(20 30);
}

// Mixin

html,
body {
    @include sass-rem(font-size, 16);
    @include sass-rem(margin, 20 30);
}
```

### CSS

```css
html,
body {
    font-size: 1rem;
    margin: 1.25rem 1.875rem;
}
```
npm package: @sass-collective/strip-unit
Description: Strip unit on CSS value.
Author: The Sass Collective Authors
Latest version: 3.1.2

<div align="center">

![Sass Strip Unit](.github/logo.svg)

</div>

[![Version](https://flat.badgen.net/npm/v/@sass-collective/strip-unit)](https://www.npmjs.com/package/@sass-collective/strip-unit)
[![Downloads](https://flat.badgen.net/npm/dt/@sass-collective/strip-unit)](https://www.npmjs.com/package/@sass-collective/strip-unit)
[![License](https://flat.badgen.net/github/license/sass-collective/sass-collective)](https://flat.badgen.net/github/license/sass-collective/sass-collective)

## Introduction

Strip unit on CSS value.

## Installing

```shell
npm install @sass-collective/strip-unit
```

## Usage

```scss
@use "@sass-collective/strip-unit";
```

## API

### Sass functions

| Function        | Description                    |
|-----------------|--------------------------------|
| `strip($value)` | Return value without the unit. |

#### Strip unit value with `strip-unit.strip()`

The following Sass will produce:

```scss
@use "@sass-collective/strip-unit";

$value: strip-unit.strip(100px);
// 100
```
npm package: @sass-fairy/break
Description: Provides Sass mixins, functions, and variables for working with breakpoints and aids in responsive development
Author: roydukkey
Latest version: 1.2.0

# @sass-fairy/break

<a href="https://sass-fairy.com/"><img src="https://sass-fairy.com/img/logo.svg" alt="Sass Fairy Logo" width="150" align="right" /></a>

[![Release Version](https://img.shields.io/npm/v/@sass-fairy/break.svg)](https://www.npmjs.com/package/@sass-fairy/break)
[![License](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT)

Provides Sass mixins, functions, and variables for working with breakpoints and aids in responsive development.

## Install

### Requires

* Dart Sass: `>=1.79.0`

Install the package:

```bash
npm install @sass-fairy/break
```

Use the package like any other Sass module:

```scss
@use '@sass-fairy/break';
```

Depending on your setup, you may need to configure `node_modules` as include path:

```js
const sass = require('sass');

sass.compile(filePath, {
  loadPaths: ['node_modules']
});
```

## Documentation

See [sass-fairy.com/api/break](http://sass-fairy.com/api/break) for more information about this package.
npm package: @sass-fairy/color
Description: Provides extended functionality for generating new colors from existing colors and building color themes in Sass
Author: roydukkey
Latest version: 1.2.0

# @sass-fairy/color

<a href="https://sass-fairy.com/"><img src="https://sass-fairy.com/img/logo.svg" alt="Sass Fairy Logo" width="150" align="right" /></a>

[![Release Version](https://img.shields.io/npm/v/@sass-fairy/color.svg)](https://www.npmjs.com/package/@sass-fairy/color)
[![License](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT)

Provides extended functionality for generating new colors from existing colors and building color themes in Sass.

## Install

### Requires

* Dart Sass: `>=1.79.0`

Install the package:

```bash
npm install @sass-fairy/color
```

Use the package like any other Sass module:

```scss
@use '@sass-fairy/color';
```

Depending on your setup, you may need to configure `node_modules` as include path:

```js
const sass = require('sass');

sass.compile(filePath, {
  loadPaths: ['node_modules']
});
```

## Documentation

See [sass-fairy.com/api/color](http://sass-fairy.com/api/color) for more information about this package.
npm package: @sass-fairy/exception
Description: Provides Sass functions to standardize exception messages and assist with common validation
Author: roydukkey
Latest version: 1.1.1

# @sass-fairy/exception

<a href="https://sass-fairy.com/"><img src="https://sass-fairy.com/img/logo.svg" alt="Sass Fairy Logo" width="150" align="right" /></a>

[![Release Version](https://img.shields.io/npm/v/@sass-fairy/exception.svg)](https://www.npmjs.com/package/@sass-fairy/exception)
[![License](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT)

Provides Sass functions to standardize exception messages and assist with common validation.

## Install

### Requires

* Dart Sass: `>=1.23.0`

Install the package:

```bash
npm install @sass-fairy/exception
```

Use the package like any other Sass module:

```scss
@use '@sass-fairy/exception';
```

Depending on your setup, you may need to configure `node_modules` as include path:

```js
const sass = require('sass');

sass.compile(filePath, {
  loadPaths: ['node_modules']
});
```

## Documentation

See [sass-fairy.com/api/exception](http://sass-fairy.com/api/exception) for more information about this package.
npm package: @sass-fairy/list
Description: Provides extended functionality for accessing and modifying lists in Sass, with interfaces similar to ECMA specifications
Author: roydukkey
Latest version: 1.2.4

# @sass-fairy/list

<a href="https://sass-fairy.com/"><img src="https://sass-fairy.com/img/logo.svg" alt="Sass Fairy Logo" width="150" align="right" /></a>

[![Release Version](https://img.shields.io/npm/v/@sass-fairy/list.svg)](https://www.npmjs.com/package/@sass-fairy/list)
[![License](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT)

Provides extended functionality for accessing and modifying lists in Sass, with interfaces similar to ECMA specifications.

## Install

### Requires

* Dart Sass: `>=1.33.0`

Install the package:

```bash
npm install @sass-fairy/list
```

Use the package like any other Sass module:

```scss
@use '@sass-fairy/list';
```

Depending on your setup, you may need to configure `node_modules` as include path:

```js
const sass = require('sass');

sass.compile(filePath, {
  loadPaths: ['node_modules']
});
```

## Documentation

See [sass-fairy.com/api/list](http://sass-fairy.com/api/list) for more information about this package.
npm package: @sass-fairy/map
Description: Provides extended functionality for processing key/value pairs in Sass maps
Author: roydukkey
Latest version: 1.1.1

# @sass-fairy/map

<a href="https://sass-fairy.com/"><img src="https://sass-fairy.com/img/logo.svg" alt="Sass Fairy Logo" width="150" align="right" /></a>

[![Release Version](https://img.shields.io/npm/v/@sass-fairy/map.svg)](https://www.npmjs.com/package/@sass-fairy/map)
[![License](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT)

Provides extended functionality for processing key/value pairs in Sass maps.

## Install

### Requires

* Dart Sass: `>=1.33.0`

Install the package:

```bash
npm install @sass-fairy/map
```

Use the package like any other Sass module:

```scss
@use '@sass-fairy/map';
```

Depending on your setup, you may need to configure `node_modules` as include path:

```js
const sass = require('sass');

sass.compile(filePath, {
  loadPaths: ['node_modules']
});
```

## Documentation

See [sass-fairy.com/api/map](http://sass-fairy.com/api/map) for more information about this package.
npm package: @sass-fairy/math
Description: Provides extended functionality for working with numbers in Sass
Author: roydukkey
Latest version: 1.0.3

# @sass-fairy/math

<a href="https://sass-fairy.com/"><img src="https://sass-fairy.com/img/logo.svg" alt="Sass Fairy Logo" width="150" align="right" /></a>

[![Release Version](https://img.shields.io/npm/v/@sass-fairy/math.svg)](https://www.npmjs.com/package/@sass-fairy/math)
[![License](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT)

Provides extended functionality for working with numbers in Sass.

## Install

### Requires

* Dart Sass: `>=1.33.0`

Install the package:

```bash
npm install @sass-fairy/math
```

Use the package like any other Sass module:

```scss
@use '@sass-fairy/math';
```

Depending on your setup, you may need to configure `node_modules` as include path:

```js
const sass = require('sass');

sass.compile(filePath, {
  loadPaths: ['node_modules']
});
```

## Documentation

See [sass-fairy.com/api/math](http://sass-fairy.com/api/math) for more information about this package.
npm package: @sass-fairy/meta
Description: Provides extended functionality for handling Sass’s inner workings
Author: roydukkey
Latest version: 1.0.2

# @sass-fairy/meta

<a href="https://sass-fairy.com/"><img src="https://sass-fairy.com/img/logo.svg" alt="Sass Fairy Logo" width="150" align="right" /></a>

[![Release Version](https://img.shields.io/npm/v/@sass-fairy/meta.svg)](https://www.npmjs.com/package/@sass-fairy/meta)
[![License](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT)

Provides extended functionality for handling Sass’s inner workings.

## Install

### Requires

* Dart Sass: `>=1.23.0`

Install the package:

```bash
npm install @sass-fairy/meta
```

Use the package like any other Sass module:

```scss
@use '@sass-fairy/meta';
```

Depending on your setup, you may need to configure `node_modules` as include path:

```js
const sass = require('sass');

sass.compile(filePath, {
  loadPaths: ['node_modules']
});
```

## Documentation

See [sass-fairy.com/api/meta](http://sass-fairy.com/api/meta) for more information about this package.
npm package: @sass-fairy/string
Description: Provides extended functionality for processing strings in Sass, with interfaces similar to ECMA specifications
Author: roydukkey
Latest version: 1.3.1

# @sass-fairy/string

<a href="https://sass-fairy.com/"><img src="https://sass-fairy.com/img/logo.svg" alt="Sass Fairy Logo" width="150" align="right" /></a>

[![Release Version](https://img.shields.io/npm/v/@sass-fairy/string.svg)](https://www.npmjs.com/package/@sass-fairy/string)
[![License](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT)

Provides extended functionality for processing strings in Sass, with interfaces similar to ECMA specifications.

## Install

### Requires

* Dart Sass: `>=1.33.0`

Install the package:

```bash
npm install @sass-fairy/string
```

Use the package like any other Sass module:

```scss
@use '@sass-fairy/string';
```

Depending on your setup, you may need to configure `node_modules` as include path:

```js
const sass = require('sass');

sass.compile(filePath, {
  loadPaths: ['node_modules']
});
```

## Documentation

See [sass-fairy.com/api/string](http://sass-fairy.com/api/string) for more information about this package.
npm package: @sass-fairy/url
Description: Provides Sass functions for working with URL data, encoding, and inline SVGs
Author: roydukkey
Latest version: 1.0.1

# @sass-fairy/url

<a href="https://sass-fairy.com/"><img src="https://sass-fairy.com/img/logo.svg" alt="Sass Fairy Logo" width="150" align="right" /></a>

[![Release Version](https://img.shields.io/npm/v/@sass-fairy/url.svg)](https://www.npmjs.com/package/@sass-fairy/url)
[![License](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT)

Provides Sass functions for working with URL data, encoding, and inline SVGs.

## Install

### Requires

* Dart Sass: `>=1.33.0`

Install the package:

```bash
npm install @sass-fairy/url
```

Use the package like any other Sass module:

```scss
@use '@sass-fairy/url';
```

Depending on your setup, you may need to configure `node_modules` as include path:

```js
const sass = require('sass');

sass.compile(filePath, {
  loadPaths: ['node_modules']
});
```

## Documentation

See [sass-fairy.com/api/url](http://sass-fairy.com/api/url) for more information about this package.