npm package: @hidoo/styleunit
Description: The unit oriented CSS framework implemented in Sass.
Author: hidoo
Latest version: 1.0.0-alpha.10

# @hidoo/styleunit

[![Test](https://github.com/hidoo/styleunit/actions/workflows/test.yml/badge.svg)](https://github.com/hidoo/styleunit/actions/workflows/test.yml)

> The unit oriented CSS framework implemented in Sass.

## Demo

- [Style Guide](https://hidoo.github.io/styleunit/index.html) (Generated by [kss-node](https://github.com/kss-node/kss-node))

## Installation

```sh
npm install @hidoo/styleunit
```

## Usage

```scss
@use 'node_modules/@hidoo/styleunit/src/index.scss';
```

### Use with [NodePackageImporter](https://sass-lang.com/documentation/js-api/classes/nodepackageimporter/)

```scss
@use 'pkg:@hidoo/styleunit';
```

### Use with [@hidoo/sass-importer](https://github.com/hidoo/unit-sass/tree/master/packages/sass-importer)

```scss
@use '@hidoo/styleunit';
```

### Use with configured settings

```scss
// Use this package with the configured settings
@use 'node_modules/@hidoo/styleunit/src/index.scss' with (
  $prefix: 'u'
);

// Initialize manually
@use 'node_modules/@hidoo/styleunit/src/bootstrap';
```

### Usage only with the necessary units

```scss
// Use this package with the configured settings
@use 'node_modules/@hidoo/styleunit/src/settings' with (
  $prefix: 'u'
);

// Use all of text unit
@use 'node_modules/@hidoo/styleunit/src/unit/text';

// Use part of button unit
@use 'node_modules/@hidoo/styleunit/src/unit/button/core';
@use 'node_modules/@hidoo/styleunit/src/unit/button/inline';

// Initialize manually
@use 'node_modules/@hidoo/styleunit/src/bootstrap';
```

## Plugins

- [spritesheet](./plugin/spritesheet)

## API

### @mixin apply-aspect-ratio

apply aspect ratio settings

#### Parameters

| Name      | Type                                                             | Description | Default |
| :-------- | :--------------------------------------------------------------- | :---------- | :------ |
| `$width`  | **[Number](https://sass-lang.com/documentation/values/numbers)** | width       | `16`    |
| `$height` | **[Number](https://sass-lang.com/documentation/values/numbers)** | height      | `9`     |

#### Examples

scss inputs

```scss
.selector {
  @include mixin.box-apply-aspect-ratio($width: 16, $height: 9);
}
```

css outputs

```css
.selector::before {
  content: '';
  display: block;
  width: 100%;
  height: 0;
  padding-top: 56.25%;
}
```

### @mixin apply-clearfix

apply clearfix

#### Examples

scss inputs

```scss
.selector {
  @include mixin.box-apply-clearfix();
}
```

css outputs

```css
.selector::before,
.selector::after {
  content: '';
  display: table;
}
.selector::after {
  clear: both;
}
```

### @function foreground

return foreground color

#### Parameters

| Name                            | Type                                                             | Description      | Default                        |
| :------------------------------ | :--------------------------------------------------------------- | :--------------- | :----------------------------- |
| `$background-color`             | **[Color](https://sass-lang.com/documentation/values/colors)**   | background-color | -                              |
| `$options`                      | **[Map](https://sass-lang.com/documentation/values/maps)**       | options          | `()`                           |
| `$options.threshold`            | **[Number](https://sass-lang.com/documentation/values/numbers)** | threshold        | `60%`                          |
| `$options.color-mappings`       | **[Map](https://sass-lang.com/documentation/values/maps)**       | color mappings   | -                              |
| `$options.color-mappings.dark`  | **[Map](https://sass-lang.com/documentation/values/maps)**       | dark color       | `settings.$color-scheme.black` |
| `$options.color-mappings.light` | **[Map](https://sass-lang.com/documentation/values/maps)**       | light color      | `settings.$color-scheme.white` |

#### Returns

**[Color](https://sass-lang.com/documentation/values/colors)** foreground color

#### Examples

scss inputs

```scss
.selector {
  content: function.color-foreground(#000);
}
```

css outputs

```css
.selector {
  content: #fff;
}
```

### $themes

Default builtin theme

#### Type

**[Map](https://sass-lang.com/documentation/values/maps)**

#### Properties

| Name    | Type                                                       | Description           | Default |
| :------ | :--------------------------------------------------------- | :-------------------- | :------ |
| `light` | **[Map](https://sass-lang.com/documentation/values/maps)** | values of light theme | `(...)` |
| `dark`  | **[Map](https://sass-lang.com/documentation/values/maps)** | values of dark theme  | `(...)` |

### $palette

Color palette

#### Type

**[Map](https://sass-lang.com/documentation/values/maps)**

#### Properties

| Name            | Type                                                         | Description                                       | Default           |
| :-------------- | :----------------------------------------------------------- | :------------------------------------------------ | :---------------- |
| `black`         | **[List](https://sass-lang.com/documentation/values/lists)** | <span style="color: rgb(0, 0, 0);">█</span>       | `(0, 0, 0)`       |
| `dark-moon`     | **[List](https://sass-lang.com/documentation/values/lists)** | <span style="color: rgb(20, 23, 26);">█</span>    | `(20, 23, 26)`    |
| `night-sky`     | **[List](https://sass-lang.com/documentation/values/lists)** | <span style="color: rgb(38, 44, 51);">█</span>    | `(38, 44, 51)`    |
| `black-olive`   | **[List](https://sass-lang.com/documentation/values/lists)** | <span style="color: rgb(63, 63, 63);">█</span>    | `(63, 63, 63)`    |
| `dim-gray`      | **[List](https://sass-lang.com/documentation/values/lists)** | <span style="color: rgb(107, 107, 109);">█</span> | `(107, 107, 109)` |
| `nocturnal`     | **[List](https://sass-lang.com/documentation/values/lists)** | <span style="color: rgb(119, 124, 130);">█</span> | `(119, 124, 130)` |
| `gateway-gray`  | **[List](https://sass-lang.com/documentation/values/lists)** | <span style="color: rgb(159, 159, 161);">█</span> | `(159, 159, 161)` |
| `stone`         | **[List](https://sass-lang.com/documentation/values/lists)** | <span style="color: rgb(195, 195, 197);">█</span> | `(195, 195, 197)` |
| `olympus-white` | **[List](https://sass-lang.com/documentation/values/lists)** | <span style="color: rgb(213, 215, 217);">█</span> | `(213, 215, 217)` |
| `mercury`       | **[List](https://sass-lang.com/documentation/values/lists)** | <span style="color: rgb(235, 236, 237);">█</span> | `(235, 236, 237)` |
| `snow-flake`    | **[List](https://sass-lang.com/documentation/values/lists)** | <span style="color: rgb(237, 237, 240);">█</span> | `(237, 237, 240)` |
| `ghost-white`   | **[List](https://sass-lang.com/documentation/values/lists)** | <span style="color: rgb(249, 249, 250);">█</span> | `(249, 249, 250)` |
| `white`         | **[List](https://sass-lang.com/documentation/values/lists)** | <span style="color: rgb(255, 255, 255);">█</span> | `(255, 255, 255)` |
| `summer-sky`    | **[List](https://sass-lang.com/documentation/values/lists)** | <span style="color: rgb(55, 165, 228);">█</span>  | `(55, 165, 228)`  |
| `sky-blue`      | **[List](https://sass-lang.com/documentation/values/lists)** | <span style="color: rgb(255, 255, 255);">█</span> | `(122, 195, 237)` |

### $mappings

Color mappings

#### Type

**[Map](https://sass-lang.com/documentation/values/maps)**

#### Properties

| Name         | Type                                                             | Description     | Default         |
| :----------- | :--------------------------------------------------------------- | :-------------- | :-------------- |
| `a`          | **[String](https://sass-lang.com/documentation/values/strings)** | type a          | `black`         |
| `b`          | **[String](https://sass-lang.com/documentation/values/strings)** | type b          | `dark-moon`     |
| `c`          | **[String](https://sass-lang.com/documentation/values/strings)** | type c          | `night-sky`     |
| `d`          | **[String](https://sass-lang.com/documentation/values/strings)** | type d          | `black-olive`   |
| `e`          | **[String](https://sass-lang.com/documentation/values/strings)** | type e          | `dim-gray`      |
| `f`          | **[String](https://sass-lang.com/documentation/values/strings)** | type f          | `nocturnal`     |
| `g`          | **[String](https://sass-lang.com/documentation/values/strings)** | type g          | `gateway-gray`  |
| `h`          | **[String](https://sass-lang.com/documentation/values/strings)** | type h          | `stone`         |
| `i`          | **[String](https://sass-lang.com/documentation/values/strings)** | type i          | `olympus-white` |
| `j`          | **[String](https://sass-lang.com/documentation/values/strings)** | type j          | `mercury`       |
| `k`          | **[String](https://sass-lang.com/documentation/values/strings)** | type k          | `snow-flake`    |
| `l`          | **[String](https://sass-lang.com/documentation/values/strings)** | type l          | `ghost-white`   |
| `m`          | **[String](https://sass-lang.com/documentation/values/strings)** | type m          | `white`         |
| `n`          | **[String](https://sass-lang.com/documentation/values/strings)** | type n          | `summer-sky`    |
| `o`          | **[String](https://sass-lang.com/documentation/values/strings)** | type o          | `sky-blue`      |
| `foreground` | **[String](https://sass-lang.com/documentation/values/strings)** | type foreground | `black`         |
| `background` | **[String](https://sass-lang.com/documentation/values/strings)** | type background | `white`         |
| `link`       | **[String](https://sass-lang.com/documentation/values/strings)** | type link       | `summer-sky`    |
| `focus`      | **[String](https://sass-lang.com/documentation/values/strings)** | type focus      | `sky-blue`      |

### $family

Default font family.

| Name                        | Description                                                      |
| :-------------------------- | :--------------------------------------------------------------- |
| `system-ui`                 | Use system ui font as a primary font family in macOS.            |
| `-apple-system`             | Use "San Francisco" as a secondary font family in macOS.         |
| `BlinkMacSystemFont`        | Use "San Francisco" as a primary font family in chrome on macOS. |
| `Helvetica Neue`            | Use as a fallback font family in macOS.                          |
| `Arial`                     | Use as a primary font family in Windows.                         |
| `Hiragino Sans`             | Use as a primary japanese font family in macOS.                  |
| `Hiragino Kaku Gothic ProN` | Use as a fallback of Hiragino Sans in macOS.                     |
| `Noto Sans JP`              | Use as a primary japanese font family in Windows.                |
| `BIZ UDPGothic`             | Use as a secondary japanese font family in Windows.              |
| `Meiryo`                    | Use as a fallback japanese font family in Windows.               |

#### Type

**[List](https://sass-lang.com/documentation/values/lists)**

### $family-monospace

Default monospace font family.

| Name       | Description                                                                       |
| :--------- | :-------------------------------------------------------------------------------- |
| `Consolas` | Use as a primary monospace font family in Windows. (Use it if installed in macOS) |
| `Monaco`   | Use as a primary monospace font family in macOS.                                  |
| `Menlo`    | Use as a secondary monospace font family in macOS.                                |
| `Courier`  | Use as a secondary monospace font family in Windows.                              |

#### Type

**[List](https://sass-lang.com/documentation/values/lists)**

### $family-presets

Default font family presets

#### Type

**[Map](https://sass-lang.com/documentation/values/maps)**

#### Properties

| Name         | Type                                                             | Description            | Default             |
| :----------- | :--------------------------------------------------------------- | :--------------------- | :------------------ |
| `sans-serif` | **[String](https://sass-lang.com/documentation/values/strings)** | Sans-serif font family | `$family`           |
| `monospace`  | **[String](https://sass-lang.com/documentation/values/strings)** | Monospace font family  | `$family-monospace` |

### $size

Default font size.
(default: `14px`)

#### Type

**[Number](https://sass-lang.com/documentation/values/numbers)**

### $base-size

Default base font size.
(default: `16px`)
this use if `$enable-relative-size` is `true`

#### Type

**[Number](https://sass-lang.com/documentation/values/numbers)**

### $size-presets

Default font size presets

#### Type

**[Map](https://sass-lang.com/documentation/values/maps)**

#### Properties

| Name      | Type                                                             | Description                                                                       | Default |
| :-------- | :--------------------------------------------------------------- | :-------------------------------------------------------------------------------- | :------ |
| `xsmall`  | **[Number](https://sass-lang.com/documentation/values/numbers)** | <span style="font-size: 0.625rem;">Lorem ipsum dolor sit amet.</span> (= `10px`)  | `0.625` |
| `small`   | **[Number](https://sass-lang.com/documentation/values/numbers)** | <span style="font-size: 0.75rem;">Lorem ipsum dolor sit amet.</span> (= `12px`)   | `0.75`  |
| `medium`  | **[Number](https://sass-lang.com/documentation/values/numbers)** | s<span style="font-size: 0.875rem;">Lorem ipsum dolor sit amet.</span> (= `14px`) | `0.875` |
| `large`   | **[Number](https://sass-lang.com/documentation/values/numbers)** | <span style="font-size: 1rem;">Lorem ipsum dolor sit amet.</span> (= `16px`)      | `1`     |
| `xlarge`  | **[Number](https://sass-lang.com/documentation/values/numbers)** | <span style="font-size: 1.125rem;">Lorem ipsum dolor sit amet.</span> (= `18px`)  | `1.125` |
| `2xlarge` | **[Number](https://sass-lang.com/documentation/values/numbers)** | <span style="font-size: 1.25rem;">Lorem ipsum dolor sit amet.</span> (= `20px`)   | `1.25`  |
| `3xlarge` | **[Number](https://sass-lang.com/documentation/values/numbers)** | <span style="font-size: 1.375rem;">Lorem ipsum dolor sit amet.</span> (= `22px`)  | `1.375` |
| `4xlarge` | **[Number](https://sass-lang.com/documentation/values/numbers)** | <span style="font-size: 1.5rem;">Lorem ipsum dolor sit amet.</span> (= `24px`)    | `1.5`   |

### $weight

Default font weight.
(default: `400`)

#### Type

**[Number](https://sass-lang.com/documentation/values/numbers)**

### $weight-presets

Font weight presets

#### Type

**[Map](https://sass-lang.com/documentation/values/maps)**

#### Properties

| Name          | Type                                                             | Description                                                                  | Default |
| :------------ | :--------------------------------------------------------------- | :--------------------------------------------------------------------------- | :------ |
| `thin`        | **[Number](https://sass-lang.com/documentation/values/numbers)** | <span style="font-weight: 100;">Lorem ipsum dolor sit amet.</span> (= `100`) | `100`   |
| `extra-light` | **[Number](https://sass-lang.com/documentation/values/numbers)** | <span style="font-weight: 200;">Lorem ipsum dolor sit amet.</span> (= `200`) | `200`   |
| `light`       | **[Number](https://sass-lang.com/documentation/values/numbers)** | <span style="font-weight: 300;">Lorem ipsum dolor sit amet.</span> (= `300`) | `300`   |
| `regular`     | **[Number](https://sass-lang.com/documentation/values/numbers)** | <span style="font-weight: 400;">Lorem ipsum dolor sit amet.</span> (= `400`) | `400`   |
| `medium`      | **[Number](https://sass-lang.com/documentation/values/numbers)** | <span style="font-weight: 500;">Lorem ipsum dolor sit amet.</span> (= `500`) | `500`   |
| `semi-bold`   | **[Number](https://sass-lang.com/documentation/values/numbers)** | <span style="font-weight: 600;">Lorem ipsum dolor sit amet.</span> (= `600`) | `600`   |
| `bold`        | **[Number](https://sass-lang.com/documentation/values/numbers)** | <span style="font-weight: 700;">Lorem ipsum dolor sit amet.</span> (= `700`) | `700`   |
| `extra-bold`  | **[Number](https://sass-lang.com/documentation/values/numbers)** | <span style="font-weight: 800;">Lorem ipsum dolor sit amet.</span> (= `800`) | `800`   |
| `black`       | **[Number](https://sass-lang.com/documentation/values/numbers)** | <span style="font-weight: 900;">Lorem ipsum dolor sit amet.</span> (= `900`) | `900`   |

### $variant

Default font variant
(default: (common-ligatures proportional-width emoji))

#### Type

**[List](https://sass-lang.com/documentation/values/lists)**

### $smoothing

Default font smoothing
(webkit: antialiased, moz-osx: grayscale)

#### Type

**[Map](https://sass-lang.com/documentation/values/maps)**

#### Properties

| Name      | Type                                                             | Description          | Default       |
| :-------- | :--------------------------------------------------------------- | :------------------- | :------------ |
| `webkit`  | **[Number](https://sass-lang.com/documentation/values/numbers)** | For browsers macOS   | `antialiased` |
| `moz-osx` | **[Number](https://sass-lang.com/documentation/values/numbers)** | For firefox on macOS | `grayscale`   |

### $enable-relative-size

enable relative font size specify.
override base size settings of font
(default: `true`)

#### Type

**[Boolean](https://sass-lang.com/documentation/values/booleans)**

### $applying-units

Default list of units that applying font

#### Type

**[List](https://sass-lang.com/documentation/values/lists)**

### $pkg

Package name.
(default: `"su"`)

#### Type

**[String](https://sass-lang.com/documentation/values/strings)**

#### Examples

scss inputs

```scss
$pkg: 's';
```

css outputs

```css
:root {
  --s-breakpoint-mobile: 667px;
}
```

### $prefix

Default prefix of unit class name.
(default: `"unit"`)

#### Type

**[String](https://sass-lang.com/documentation/values/strings)**

#### Examples

scss inputs

```scss
$prefix: 'u';
```

css outputs

```css
.u-icon {
  /* settings */
}
```

### $breakpoints

Default breakpoints.

#### Type

**[Map](https://sass-lang.com/documentation/values/maps)**

#### Properties

| Name      | Type                                                             | Description                               | Default                                |
| :-------- | :--------------------------------------------------------------- | :---------------------------------------- | :------------------------------------- |
| `desktop` | **[Number](https://sass-lang.com/documentation/values/numbers)** | Breakpoint width for desktop.             | `1024px`                               |
| `mobile`  | **[Number](https://sass-lang.com/documentation/values/numbers)** | Breakpoint width for mobile.              | `667px`                                |
| `sm`      | **[String](https://sass-lang.com/documentation/values/strings)** | Breakpoint name when mobile viewport.     | `"only screen and (width < $mobile)"`  |
| `not-sm`  | **[String](https://sass-lang.com/documentation/values/strings)** | Breakpoint name when not mobile viewport. | `"only screen and ($mobile <= width)"` |

### $line-height

Default line-height
(default: `1.5`)

#### Type

**[Number](https://sass-lang.com/documentation/values/numbers)**

### $hyphens

Default hyphens
(default: `auto`)

#### Type

**[String](https://sass-lang.com/documentation/values/strings)**

### $letter-spacing

Default letter-spacing
(default: `0.04em`)

#### Type

**[Number](https://sass-lang.com/documentation/values/numbers)**

### $text-size-adjust

Default text-size-adjust
(default: `100%`)

#### Type

**[Number](https://sass-lang.com/documentation/values/numbers)**

### $word-break

Default word-break
(default: `normal`)

#### Type

**[String](https://sass-lang.com/documentation/values/strings)**

### $word-wrap

Default word-wrap
(default: `break-word`)

#### Type

**[String](https://sass-lang.com/documentation/values/strings)**

### $line-break

Default line-break
(default: `strict`)

#### Type

**[String](https://sass-lang.com/documentation/values/strings)**

### $overflow-wrap

Default line-break
(default: `strict`)

#### Type

**[String](https://sass-lang.com/documentation/values/strings)**

### $message-on-image-error

Default message on image error
(default: `Failed to load image.`)

#### Type

**[String](https://sass-lang.com/documentation/values/strings)**

### $verbose

out warnings verbosely or not

#### Type

**[Boolean](https://sass-lang.com/documentation/values/booleans)**

### $prefix

Default prefix for utility class name.
(default: `"util"`)

#### Type

**[String](https://sass-lang.com/documentation/values/strings)**

#### Examples

scss inputs

```scss
$util-prefix: 'h';
```

css outputs

```css
.h--width-0 {
  /* settings */
}
```

### $width

Default width list.

#### Type

**[List](https://sass-lang.com/documentation/values/lists)**

### $height

Default height list.

#### Type

**[List](https://sass-lang.com/documentation/values/lists)**

### $margin

Default margin list

#### Type

**[List](https://sass-lang.com/documentation/values/lists)**

### $padding

Default padding list

#### Type

**[List](https://sass-lang.com/documentation/values/lists)**

### $position

Default position list

#### Type

**[List](https://sass-lang.com/documentation/values/lists)**

### $directions

Default direction list

#### Type

**[List](https://sass-lang.com/documentation/values/lists)**

### $z-index

Default z-index list

#### Type

**[List](https://sass-lang.com/documentation/values/lists)**

### css// prettier-ignore

$\_default-selectors: (":disabled",) !default;

/// Utility for \`:has\` pseudo classes with \`:disabled\`
/// @param

Default selectors

### css// prettier-ignore

$\_default-selectors: (":hover", ":focus") !default;

/// Utility for \`:has\` pseudo classes with \`:hover\` and \`:focus\`
/// @param

Default selectors

### css// prettier-ignore

$\_default-selectors: (":checked",) !default;

/// Utility for \`:has\` pseudo classes with \`:checked\`
/// @param

Default selectors

### css// prettier-ignore

$\_default-selectors: (":disabled",) !default;

/// Utility for pseudo classes like \`:disabled\`
/// @param

Default selectors

#### Properties

| Name  | Type                                                               | Description                   | Default |
| :---- | :----------------------------------------------------------------- | :---------------------------- | :------ |
| `not` | **[Boolean](https://sass-lang.com/documentation/values/booleans)** | Deny selectors whether or not | `false` |

#### Properties

| Name  | Type                                                               | Description                   | Default |
| :---- | :----------------------------------------------------------------- | :---------------------------- | :------ |
| `not` | **[Boolean](https://sass-lang.com/documentation/values/booleans)** | Deny selectors whether or not | `false` |

### @mixin by-breakpoints

Utility to generate selectors by breakpoints.

#### Parameters

| Name               | Type                                                             | Description                            | Default |
| :----------------- | :--------------------------------------------------------------- | :------------------------------------- | :------ |
| `$breakpoints`     | **[Map](https://sass-lang.com/documentation/values/maps)**       | Breakpoints.                           | `()`    |
| `$options`         | **[Map](https://sass-lang.com/documentation/values/maps)**       | options                                | `()`    |
| `$options.ignores` | **[List](https://sass-lang.com/documentation/values/lists)**     | Breakpoint names to ignore.            | `()`    |
| `$options.target`  | **[String](https://sass-lang.com/documentation/values/strings)** | Target selector string to replacement. | `""`    |

#### Examples

scss inputs

```scss
$breakpoint: (
  'sm': '(width <= 640px)',
  'md': '(width <= 768px)',
  ...
);

.selector {
  @include mixin.by-breakpoints() {
    font-size: 16px;
  }
}
```

css outputs

```css
.selector {
  font-size: 16px;
}
@media (width <= 640px) {
  .sm\:selector {
    font-size: 16px;
  }
}
@media (width <= 768px) {
  .md\:selector {
    font-size: 16px;
  }
}
...
```

### @mixin has-disabled

Utility for `:has` pseudo classes with `:disabled`

#### Parameters

| Name                    | Type                                                         | Description                  | Default |
| :---------------------- | :----------------------------------------------------------- | :--------------------------- | :------ |
| `$additional-selectors` | **[List](https://sass-lang.com/documentation/values/lists)** | list of additional selectors | `()`    |
| `$options`              | **[Map](https://sass-lang.com/documentation/values/maps)**   | options                      | `()`    |

#### Examples

scss inputs

```scss
.selector {
  @include mixin.has-disabled() {
    font-size: 16px;
  }
}
```

css outputs

```css
.selector:has(:disabled, .is-disabled) {
  font-size: 16px;
}
```

### @mixin has-focus

Utility for `:has` pseudo classes with `:hover` and `:focus`

#### Parameters

| Name                    | Type                                                         | Description                  | Default |
| :---------------------- | :----------------------------------------------------------- | :--------------------------- | :------ |
| `$additional-selectors` | **[List](https://sass-lang.com/documentation/values/lists)** | list of additional selectors | `()`    |
| `$options`              | **[Map](https://sass-lang.com/documentation/values/maps)**   | options                      | `()`    |

#### Examples

scss inputs

```scss
.selector {
  @include mixin.has-focus() {
    font-size: 16px;
  }
}
```

css outputs

```css
.selector:has(:hover, :focus, .is-focus) {
  font-size: 16px;
}
```

### @mixin has-selected

Utility for `:has` pseudo classes with `:checked`

#### Parameters

| Name                    | Type                                                         | Description                  | Default |
| :---------------------- | :----------------------------------------------------------- | :--------------------------- | :------ |
| `$additional-selectors` | **[List](https://sass-lang.com/documentation/values/lists)** | list of additional selectors | `()`    |
| `$options`              | **[Map](https://sass-lang.com/documentation/values/maps)**   | options                      | `()`    |

#### Examples

scss inputs

```scss
.selector {
  @include mixin.has-selected() {
    font-size: 16px;
  }
}
```

css outputs

```css
.selector:has(:checked, .is-selected) {
  font-size: 16px;
}
```

### @mixin has

The utility mixin for `:has` pseudo classes.

#### Parameters

| Name         | Type                                                         | Description       | Default |
| :----------- | :----------------------------------------------------------- | :---------------- | :------ |
| `$selectors` | **[List](https://sass-lang.com/documentation/values/lists)** | list of selectors | `()`    |
| `$options`   | **[Map](https://sass-lang.com/documentation/values/maps)**   | options           | `()`    |

#### Examples

scss inputs

```scss
.selector {
  @include mixin.has((':hover', ':focus')) {
    font-size: 16px;
  }
}
```

css outputs

```scss
.selector:has(:hover, :focus) {
  font-size: 16px;
}
```

### @mixin media

The media query helper.

#### Parameters

| Name                   | Type                                                             | Description                           | Default |
| :--------------------- | :--------------------------------------------------------------- | :------------------------------------ | :------ |
| `$query`               | **[String](https://sass-lang.com/documentation/values/strings)** | Breakpoint name or media query string | -       |
| `$options`             | **[Map](https://sass-lang.com/documentation/values/maps)**       | Options                               | `()`    |
| `$options.eval-query`  | **[String](https://sass-lang.com/documentation/values/strings)** | Eval query as template whether or not | `false` |
| `$options.breakpoints` | **[Map](https://sass-lang.com/documentation/values/maps)**       | Breakpoints.                          | `null`  |

#### Examples

scss inputs

```scss
$breakpoint: (
  'sm': '(width <= 640px)',
  ...
);

.selector {
  @include mixin.media($query: 'sm') {
    font-size: 16px;
  }
}
```

css outputs

```css
@media (width <= 640px) {
  .selector {
    font-size: 16px;
  }
}
```

### @mixin on-active

Utility for pseudo classes like `.is-active`

#### Parameters

| Name                    | Type                                                         | Description                  | Default |
| :---------------------- | :----------------------------------------------------------- | :--------------------------- | :------ |
| `$additional-selectors` | **[List](https://sass-lang.com/documentation/values/lists)** | list of additional selectors | `()`    |
| `$capturing-selectors`  | **[List](https://sass-lang.com/documentation/values/lists)** | capturing parent selectors   | `()`    |

#### Examples

scss inputs

```scss
.selector {
  @include mixin.on-active() {
    font-size: 16px;
  }
}
```

css outputs

```css
.selector:where(.is-active) {
  font-size: 16px;
}
```

### @mixin on-current

Utility for pseudo classes like `.is-current`

#### Parameters

| Name                    | Type                                                         | Description                  | Default |
| :---------------------- | :----------------------------------------------------------- | :--------------------------- | :------ |
| `$additional-selectors` | **[List](https://sass-lang.com/documentation/values/lists)** | list of additional selectors | `()`    |
| `$capturing-selectors`  | **[List](https://sass-lang.com/documentation/values/lists)** | capturing parent selectors   | `()`    |

#### Examples

scss inputs

```scss
.selector {
  @include mixin.on-current() {
    font-size: 16px;
  }
}
```

css outputs

```css
.selector:where(.is-current) {
  font-size: 16px;
}
```

### @mixin on-deactive

Utility for pseudo classes like `:not(is-active)`

#### Parameters

| Name                    | Type                                                         | Description                  | Default |
| :---------------------- | :----------------------------------------------------------- | :--------------------------- | :------ |
| `$additional-selectors` | **[List](https://sass-lang.com/documentation/values/lists)** | list of additional selectors | `()`    |
| `$capturing-selectors`  | **[List](https://sass-lang.com/documentation/values/lists)** | capturing parent selectors   | `()`    |

#### Examples

scss inputs

```scss
.selector {
  @include mixin.on-deactive() {
    font-size: 16px;
  }
}
```

css outputs

```css
.selector::where(not(.is-active)) {
  font-size: 16px;
}
```

### @mixin on-disabled

Utility for pseudo classes like `:disabled`

#### Parameters

| Name                    | Type                                                         | Description                  | Default |
| :---------------------- | :----------------------------------------------------------- | :--------------------------- | :------ |
| `$additional-selectors` | **[List](https://sass-lang.com/documentation/values/lists)** | list of additional selectors | `()`    |
| `$capturing-selectors`  | **[List](https://sass-lang.com/documentation/values/lists)** | capturing parent selectors   | `()`    |

#### Examples

scss inputs

```scss
.selector {
  @include mixin.on-disabled() {
    font-size: 16px;
  }
}
```

css outputs

```css
.selector:where(:disabled, .is-disabled) {
  font-size: 16px;
}
```

### @mixin on-focus

Utility for pseudo classes like `:hover` and `:focus`

#### Parameters

| Name                    | Type                                                         | Description                  | Default |
| :---------------------- | :----------------------------------------------------------- | :--------------------------- | :------ |
| `$additional-selectors` | **[List](https://sass-lang.com/documentation/values/lists)** | list of additional selectors | `()`    |
| `$capturing-selectors`  | **[List](https://sass-lang.com/documentation/values/lists)** | capturing parent selectors   | `()`    |

#### Examples

scss inputs

```scss
.selector {
  @include mixin.on-focus() {
    font-size: 16px;
  }
}
```

css outputs

```css
.selector:where(:hover, :focus, .is-focus) {
  font-size: 16px;
}
```

### @mixin on-link

Utility for pseudo classes like `:link` and `:visited`

#### Parameters

| Name                    | Type                                                         | Description                  | Default |
| :---------------------- | :----------------------------------------------------------- | :--------------------------- | :------ |
| `$additional-selectors` | **[List](https://sass-lang.com/documentation/values/lists)** | list of additional selectors | `()`    |
| `$capturing-selectors`  | **[List](https://sass-lang.com/documentation/values/lists)** | capturing parent selectors   | `()`    |

#### Examples

scss inputs

```scss
.selector {
  @include mixin.on-link() {
    font-size: 16px;
  }
}
```

css outputs

```css
.selector:where(:link) {
  font-size: 16px;
}
```

### @mixin on-placeholder

wrappper of `:placeholder-shown`

#### Examples

scss inputs

```scss
.selector {
  @include mixin.on-placeholder() {
    font-size: 16px;
  }
}
```

css outputs

```css
.selector::-webkit-input-placeholder {
  font-size: 16px;
}
.selector::-moz-placeholder {
  font-size: 16px;
}
.selector:-ms-input-placeholder {
  font-size: 16px;
}
.selector:placeholder-shown {
  font-size: 16px;
}
```

### @mixin on-print

The wrapper of `@media print`

#### Examples

scss inputs

```scss
.selector {
  @include mixin.on-print() {
    font-size: 16px;
  }
}
```

css outputs

```css
@media print {
  .selector.is-active {
    font-size: 16px;
  }
}
```

### @mixin on

Utility for pseudo classes

#### Parameters

| Name                   | Type                                                         | Description                | Default |
| :--------------------- | :----------------------------------------------------------- | :------------------------- | :------ |
| `$selectors`           | **[List](https://sass-lang.com/documentation/values/lists)** | list of selectors          | `()`    |
| `$capturing-selectors` | **[List](https://sass-lang.com/documentation/values/lists)** | capturing parent selectors | `()`    |
| `$options`             | **[Map](https://sass-lang.com/documentation/values/maps)**   | options                    | `()`    |

#### Examples

scss inputs

```scss
.selector {
  @include mixin.on((':hover', ':focus')) {
    font-size: 16px;
  }
}
```

css outputs

```scss
.selector:where(:hover, :focus) {
  font-size: 16px;
}
```

### @function size

return real font-size

#### Parameters

| Name                     | Type                                                                                                                               | Description                                                                                                                           | Default |
| :----------------------- | :--------------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------------ | :------ |
| `$value`                 | **[String](https://sass-lang.com/documentation/values/strings)**, **[Number](https://sass-lang.com/documentation/values/numbers)** | value of font-size (one of `"xsmall"`, `"small"`, `"medium"`, `"large"`, `"xlarge"`, `"2xlarge"`, `"3xlarge"`, `"4xlarge"` or number) | -       |
| `$options`               | **[Map](https://sass-lang.com/documentation/values/maps)**                                                                         | options                                                                                                                               | `()`    |
| `$options.monospace`     | **[Boolean](https://sass-lang.com/documentation/values/booleans)**                                                                 | font-family is monospace or not                                                                                                       | `false` |
| `$options.relative-size` | **[Boolean](https://sass-lang.com/documentation/values/booleans)**                                                                 | convert to rem value or not                                                                                                           | `false` |

#### Returns

**[Number](https://sass-lang.com/documentation/values/numbers)** real font-size

#### Examples

scss inputs

```scss
.selector {
  font-size: function.font-size($value: 'medium');
}
```

css outputs

```css
.selector {
  font-size: 14px;
}
```

### @function concat-as-string

concatenate list as string

#### Parameters

| Name         | Type                                                             | Description | Default |
| :----------- | :--------------------------------------------------------------- | :---------- | :------ |
| `$list`      | **[List](https://sass-lang.com/documentation/values/lists)**     | list        | -       |
| `$separator` | **[String](https://sass-lang.com/documentation/values/strings)** | separator   | `","`   |

#### Returns

**[String](https://sass-lang.com/documentation/values/strings)** concatenated list

#### Examples

scss inputs

```scss
.selector {
  content: function.list-concat-as-string(('hoge', 'fuga', 'piyo'), ':');
}
```

css outputs

```css
.selector {
  content: hoge:fuga:piyo;
}
```

### @function map

map list

#### Parameters

| Name        | Type                                                                 | Description                | Default |
| :---------- | :------------------------------------------------------------------- | :------------------------- | :------ |
| `$list`     | **[List](https://sass-lang.com/documentation/values/lists)**         | list                       | -       |
| `$callback` | **[Function](https://sass-lang.com/documentation/values/functions)** | function called each items | -       |

#### Returns

**[List](https://sass-lang.com/documentation/values/lists)** mapped list

#### Examples

scss inputs

```scss
.selector {
  content: function.list-map(
    ('hoge', 'fuga', 'pi', 'yo'),
    meta.get-function('length', $module: 'string')
  );
}
```

css outputs

```css
.selector {
  content: 4 4 2 2;
}
```

### @function px-to-rem

convert px to rem

#### Parameters

| Name         | Type                                                             | Description    | Default                    |
| :----------- | :--------------------------------------------------------------- | :------------- | :------------------------- |
| `$size`      | **[Number](https://sass-lang.com/documentation/values/numbers)** | font size      | -                          |
| `$base-size` | **[Number](https://sass-lang.com/documentation/values/numbers)** | base font size | `settings.$font-base-size` |

#### Returns

**[Number](https://sass-lang.com/documentation/values/numbers)** rem value

#### Examples

scss inputs

```scss
.selector {
  font-size: function.math-px-to-rem(14px, 16px);
}
```

css outputs

```css
.selector {
  font-size: 0.875rem;
}
```

### @function remove-unit

return number without unit

#### Parameters

| Name      | Type                                                             | Description      | Default |
| :-------- | :--------------------------------------------------------------- | :--------------- | :------ |
| `$number` | **[Number](https://sass-lang.com/documentation/values/numbers)** | number with unit | -       |

#### Returns

**[Number](https://sass-lang.com/documentation/values/numbers)** number without unit

#### Examples

scss inputs

```scss
$pure-number: function.math-remove-unit(14px); // -> 14
```

### @function is-empty

value is empty or not

#### Parameters

| Name     | Type                                                                                                                                                                                                                                                         | Description | Default |
| :------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------- | :------ |
| `$value` | **[String](https://sass-lang.com/documentation/values/strings)**, **[Number](https://sass-lang.com/documentation/values/numbers)**, **[List](https://sass-lang.com/documentation/values/lists)**, **[Map](https://sass-lang.com/documentation/values/maps)** | test value  | -       |

#### Returns

**[Boolean](https://sass-lang.com/documentation/values/booleans)** value is empty or not

#### Examples

scss inputs

```scss
$result: function.meta-is-empty(''); // -> true
```

### @mixin apply-flexible-size

apply flexible size to pict

#### Parameters

| Name                      | Type                                                               | Description    | Default |
| :------------------------ | :----------------------------------------------------------------- | :------------- | :------ |
| `$width`                  | **[Number](https://sass-lang.com/documentation/values/numbers)**   | width          | `16`    |
| `$height`                 | **[Number](https://sass-lang.com/documentation/values/numbers)**   | height         | `9`     |
| `$options`                | **[Map](https://sass-lang.com/documentation/values/maps)**         | height         | -       |
| `$options.use-object-fit` | **[Boolean](https://sass-lang.com/documentation/values/booleans)** | use object-fit | `false` |

#### Examples

scss inputs

```scss
.selector {
  @include mixin.pict-apply-flexible-size($width: 16, $height: 9);
}
```

css outputs

```css
.selector::before {
  content: '';
  display: block;
  width: 100%;
  height: 0;
  padding-top: 56.25%;
}
.selector > .unit-pict__src {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 100%;
  margin: auto;
}
```

### @mixin define

define placeholder class.

#### Parameters

| Name    | Type                                                             | Description               | Default |
| :------ | :--------------------------------------------------------------- | :------------------------ | :------ |
| `$name` | **[String](https://sass-lang.com/documentation/values/strings)** | name of placeholder class | -       |

#### Examples

scss inputs

```scss
.selector {
  $name: unique-id();

  @include mixin.placeholder-define($name: $name) {
    font-size: 16px;
  }

  &__child-1 {
    @extend %#{$name};
  }

  &__child-2 {
    @extend %#{$name};
  }
}
```

css outputs

```css
.selector__child-1,
.selector__child-2 {
  font-size: 16px;
}
```

### $spritesheets

data store of sprite sheets

#### Type

**[List](https://sass-lang.com/documentation/values/lists)**, **[Map](https://sass-lang.com/documentation/values/maps)**

#### Examples

scss inputs

```scss
// format of spritesheets
$spritesheets: (
  // each by types of spritesheet
  (
      'icon-image': (
        'image': 'path/to/sprite/icon-image.png',
        'items': (
          // output each by items
          'logo': (
              'width': 10px,
              'height': 10px,
              'total-width': 30px,
              'total-height': 30px,
              'offset-x': -10px,
              'offset-y': -10px
            ),
          ...
        )
      )
    ),
  ...
);
```

### @function get-sheet-by-type

get sheet by type from values of spritesheets

#### Parameters

| Name            | Type                                                             | Description          | Default |
| :-------------- | :--------------------------------------------------------------- | :------------------- | :------ |
| `$type`         | **[String](https://sass-lang.com/documentation/values/strings)** | type of spritesheet  | -       |
| `$spritesheets` | **[Map](https://sass-lang.com/documentation/values/maps)**       | data of spritesheets | `()`    |

#### Returns

**[Map](https://sass-lang.com/documentation/values/maps)**, **[Null](https://sass-lang.com/documentation/values/null)**

### @function normalize

normalize values of spritesheet

#### Parameters

| Name      | Type                                                                                                                     | Description           | Default |
| :-------- | :----------------------------------------------------------------------------------------------------------------------- | :-------------------- | :------ |
| `$values` | **[Map](https://sass-lang.com/documentation/values/maps)**, **[List](https://sass-lang.com/documentation/values/lists)** | values of spritesheet | `()`    |

#### Returns

**[Map](https://sass-lang.com/documentation/values/maps)**, **[Null](https://sass-lang.com/documentation/values/null)**

### @mixin define

Define spritesheet

#### Parameters

| Name                           | Type                                                               | Description                                                 | Default           |
| :----------------------------- | :----------------------------------------------------------------- | :---------------------------------------------------------- | :---------------- |
| `$type`                        | **[String](https://sass-lang.com/documentation/values/strings)**   | type of spritesheet                                         | -                 |
| `$name`                        | **[String](https://sass-lang.com/documentation/values/strings)**   | name of spritesheet item                                    | -                 |
| `$options`                     | **[Map](https://sass-lang.com/documentation/values/maps)**         | options                                                     | `()`              |
| `$options.use2x`               | **[Boolean](https://sass-lang.com/documentation/values/booleans)** | use 2x image or (one of `true`, `false` or breakpoint name) | `false`           |
| `$options.as-mask`             | **[Boolean](https://sass-lang.com/documentation/values/booleans)** | use as mask image or not                                    | `false`           |
| `$options.responsive`          | **[Boolean](https://sass-lang.com/documentation/values/booleans)** | responsive or not                                           | `false`           |
| `$options.toggle`              | **[Boolean](https://sass-lang.com/documentation/values/booleans)** | toggle or not                                               | `false`           |
| `$options.capturing-selectors` | **[List](https://sass-lang.com/documentation/values/lists)**       | capturing parent selectors                                  | `("a", "button")` |

#### Examples

scss inputs

```scss
// use spritesheet plugin with configuration
@use 'path/to/node_modules/unit/src/plugin/spritesheet' with (
  $spritesheets: (
    'icon-image': (
      'image': 'path/to/sprite/icon-image.png',
      'items': (
        'logo': (
          'width': 10px,
          'height': 10px,
          'total-width': 30px,
          'total-height': 30px,
          'offset-x': -10px,
          'offset-y': -10px
        )
      )
    )
  )
);

// use this mixin
.selector {
  @include spritesheet.define($type: 'icon-image', $name: 'logo');
}
```

css outputs

```css
.selector-logo {
  --background-image: url(path/to/sprite/icon-image.png);
  background-image: var(--background-image);
}
.selector-logo {
  --overflow: hidden;
  --color: transparent;
  --text-indent: -100%;
}
.selector-logo {
  --width: 10px;
  width: var(--width);
  --height: 10px;
  height: var(--height);
  --background-position: -10px -10px;
  background-position: var(--background-position);
  --background-size: 30px 30px;
  background-size: var(--background-size);
}
```

### @mixin define-item

Define item

#### Parameters

| Name       | Type                                                             | Description              | Default |
| :--------- | :--------------------------------------------------------------- | :----------------------- | :------ |
| `$name`    | **[String](https://sass-lang.com/documentation/values/strings)** | name of spritesheet item | -       |
| `$items`   | **[Map](https://sass-lang.com/documentation/values/maps)**       | spritesheet items        | `()`    |
| `$options` | **[Map](https://sass-lang.com/documentation/values/maps)**       | options                  | `()`    |

### @mixin define-responsive-item

Define responsive item

#### Parameters

| Name       | Type                                                             | Description              | Default |
| :--------- | :--------------------------------------------------------------- | :----------------------- | :------ |
| `$name`    | **[String](https://sass-lang.com/documentation/values/strings)** | name of spritesheet item | -       |
| `$items`   | **[Map](https://sass-lang.com/documentation/values/maps)**       | spritesheet items        | `()`    |
| `$options` | **[Map](https://sass-lang.com/documentation/values/maps)**       | options                  | `()`    |

### @mixin define-responsive-toggle-item

Define responsive toggle item

#### Parameters

| Name       | Type                                                             | Description              | Default |
| :--------- | :--------------------------------------------------------------- | :----------------------- | :------ |
| `$name`    | **[String](https://sass-lang.com/documentation/values/strings)** | name of spritesheet item | -       |
| `$items`   | **[Map](https://sass-lang.com/documentation/values/maps)**       | spritesheet items        | `()`    |
| `$options` | **[Map](https://sass-lang.com/documentation/values/maps)**       | options                  | `()`    |

### @mixin define-toggle-item

Define toggle item

#### Parameters

| Name       | Type                                                             | Description              | Default |
| :--------- | :--------------------------------------------------------------- | :----------------------- | :------ |
| `$name`    | **[String](https://sass-lang.com/documentation/values/strings)** | name of spritesheet item | -       |
| `$items`   | **[Map](https://sass-lang.com/documentation/values/maps)**       | spritesheet items        | `()`    |
| `$options` | **[Map](https://sass-lang.com/documentation/values/maps)**       | options                  | `()`    |

### @mixin set-properties

set properties

#### Parameters

| Name       | Type                                                       | Description    | Default |
| :--------- | :--------------------------------------------------------- | :------------- | :------ |
| `$values`  | **[Map](https://sass-lang.com/documentation/values/maps)** | values of item | `()`    |
| `$options` | **[Map](https://sass-lang.com/documentation/values/maps)** | options        | `()`    |

### @function inverse

return inverse selector

#### Parameters

| Name        | Type                                                             | Description | Default |
| :---------- | :--------------------------------------------------------------- | :---------- | :------ |
| `$selector` | **[String](https://sass-lang.com/documentation/values/strings)** | selector    | -       |

#### Examples

scss inputs

```scss
.selector {
  content: function.selector-inverse('.hoge');
}
```

css outputs

```css
.selector {
  content: ':not(.hoge)';
}
```

### @function encode-url

return url encoded string

#### Parameters

| Name      | Type                                                             | Description | Default |
| :-------- | :--------------------------------------------------------------- | :---------- | :------ |
| `$string` | **[String](https://sass-lang.com/documentation/values/strings)** | string      | -       |

#### Returns

**[String](https://sass-lang.com/documentation/values/strings)** url encoded string

#### Examples

scss inputs

```scss
.selector {
  content: function.string-encode-url(
    '<svg xmlns="http://www.w3.org/2000/svg"></svg>'
  );
}
```

css outputs

```css
.selector {
  content: <svg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22><%2Fsvg>;
}
```

### @function replace

replace string

#### Parameters

| Name       | Type                                                             | Description          | Default |
| :--------- | :--------------------------------------------------------------- | :------------------- | :------ |
| `$string`  | **[String](https://sass-lang.com/documentation/values/strings)** | string               | -       |
| `$search`  | **[String](https://sass-lang.com/documentation/values/strings)** | substring to replace | -       |
| `$replace` | **[String](https://sass-lang.com/documentation/values/strings)** | replacement string   | `""`    |
| `$options` | **[Map](https://sass-lang.com/documentation/values/maps)**       | options              | `()`    |

#### Returns

**[String](https://sass-lang.com/documentation/values/strings)** replaced string

#### Examples

scss inputs

```scss
.selector {
  content: function.string-replace('hogefugapiyohogefugapiyo', 'fuga', 'FUGA');
}
```

css outputs

```css
.selector {
  content: hogeFUGApiyohogeFUGApiyo;
}
```

### @function sprintf

sprintf

#### Parameters

| Name      | Type                                                             | Description | Default |
| :-------- | :--------------------------------------------------------------- | :---------- | :------ |
| `$format` | **[String](https://sass-lang.com/documentation/values/strings)** | format      | -       |
| `$args`   | **[List](https://sass-lang.com/documentation/values/lists)**     | arguments   | -       |

#### Returns

**[String](https://sass-lang.com/documentation/values/strings)** formatted string

#### Examples

scss inputs

```scss
.selector {
  content: function.string-sprintf(
    '%s is small capital of %s.',
    'fuga',
    'FUGA'
  );
}
```

css outputs

```css
.selector {
  content: fuga is small capital of FUGA.;
}
```

### @mixin apply-line-truncate

apply multi line truncate

#### Parameters

| Name    | Type                                                             | Description | Default |
| :------ | :--------------------------------------------------------------- | :---------- | :------ |
| `$line` | **[Number](https://sass-lang.com/documentation/values/numbers)** | line length | `2`     |

#### Examples

scss inputs

```scss
.selector {
  @include mixin.text-apply-line-truncate($line: 3);
}
```

css outputs

```css
.selector {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}
```

### @function reserve

reserve z-index value each by types

#### Parameters

| Name             | Type                                                               | Description       | Default |
| :--------------- | :----------------------------------------------------------------- | :---------------- | :------ |
| `$type`          | **[String](https://sass-lang.com/documentation/values/strings)**   | content type name | -       |
| `$index`         | **[Number](https://sass-lang.com/documentation/values/numbers)**   | index number      | -       |
| `$options`       | **[Map](https://sass-lang.com/documentation/values/maps)**         | options           | -       |
| `$options.debug` | **[Boolean](https://sass-lang.com/documentation/values/booleans)** | debug flag        | `false` |

#### Returns

**[Number](https://sass-lang.com/documentation/values/numbers)** z-index value

#### Examples

scss inputs

```scss
.selector {
  content: function.z-index-reserve('floating', 100);
}
```

css outputs

```css
.selector {
  content: 2000100;
}
```

## Test

```sh
$ pnpm test
```

## License

MIT