npm package: @hidoo/unit
Description: Sass based css framework.
Author: hidoo
Latest version: 0.9.0

# @hidoo/unit

> Sass based css framework.

## Demo

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

## Installation

```sh
$ npm install @hidoo/unit
```

## Usage

```scss
@use "node_modules/@hidoo/unit/src/index.scss";
```

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

```scss
@use "@hidoo/unit";
```

### Usage with custom settings

```scss
// use this package with custom settings
@use "node_modules/@hidoo/unit/src/index.scss" with (
  $prefix: "u"
);
```

### Usage only the required units

```scss
// use custom settings
@use "node_modules/@hidoo/unit/src/settings" with (
  $prefix: "u"
);

// use all of text unit
@use "node_modules/@hidoo/unit/src/unit/text";

// use part of button unit
@use "node_modules/@hidoo/unit/src/unit/button/core";
@use "node_modules/@hidoo/unit/src/unit/button/inline";
```

## Plugins

+ [spritesheet](./src/plugin/spritesheet)

## Migration 0.4.4 to 0.6.x higher

TODO

## API

<a id="box-features-mixin-apply-aspect-ratio"></a>

### @mixin apply-aspect-ratio

apply aspect ratio settings

+ **Group:** Box features
+ **Access:** public

#### 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 apply-aspect-ratio($width: 16, $height: 9);
}
```

css outputs

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

<a id="box-features-mixin-apply-clearfix"></a>

### @mixin apply-clearfix

apply clearfix

+ **Group:** Box features
+ **Access:** public

#### Examples

scss inputs

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

css outputs

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

<a id="box-features-mixin-initialize"></a>

### @mixin initialize

initialize box settings

+ **Group:** Box features
+ **Access:** public

#### Parameters

|Name|Type|Description|Default|
|:--|:--|:--|:--|
|`$display`|**[String](https://sass-lang.com/documentation/values/strings)**|setting for `display`|`"block"`|
|`$overflow`|**[String](https://sass-lang.com/documentation/values/strings)**|setting for `overflow`|`null`|
|`$box-sizing`|**[String](https://sass-lang.com/documentation/values/strings)**|setting for `box-sizing`|`"content-box"`|
|`$position`|**[String](https://sass-lang.com/documentation/values/strings)**|setting for `position`|`"relative"`|
|`$list-style`|**[String](https://sass-lang.com/documentation/values/strings)**|setting for `list-style`|`0`|
|`$margin`|**[Number](https://sass-lang.com/documentation/values/numbers)**, **[List](https://sass-lang.com/documentation/values/lists)**|setting for `margin`|`0`|
|`$padding`|**[Number](https://sass-lang.com/documentation/values/numbers)**, **[List](https://sass-lang.com/documentation/values/lists)**|setting for `padding`|`0`|
|`$border`|**[Number](https://sass-lang.com/documentation/values/numbers)**, **[List](https://sass-lang.com/documentation/values/lists)**|setting for `border`|`0`|

#### Examples

scss inputs

```scss
.selector {
  @include initialize();
}
```

css outputs

```css
.selector {
  display: block;
  box-sizing: content-box;
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
  border: 0;
}
```

<a id="breakpoint-features-mixin-define"></a>

### @mixin define

define breakepoint

+ **Group:** Breakpoint features
+ **Access:** public

#### Parameters

|Name|Type|Description|Default|
|:--|:--|:--|:--|
|`$from`|**[Number](https://sass-lang.com/documentation/values/numbers)**, **[String](https://sass-lang.com/documentation/values/strings)**, **[Null](https://sass-lang.com/documentation/values/null)**|starting point of breakpoint|`null`|
|`$until`|**[Number](https://sass-lang.com/documentation/values/numbers)**, **[String](https://sass-lang.com/documentation/values/strings)**, **[Null](https://sass-lang.com/documentation/values/null)**|ending point of breakpoint|`null`|
|`$options`|**[Map](https://sass-lang.com/documentation/values/maps)**|options|`()`|
|`$options.media`|**[String](https://sass-lang.com/documentation/values/strings)**|custom media name|-|

#### Examples

scss inputs

```scss
.selector {
  @include define($from: "mobile", $until: "desktop") {
    font-size: 16px;
  }
}
```

css outputs

```css
@media only screen and (min-width: 667px) and (max-width: 1023px) {
  .selector {
    font-size: 16px;
  }
}
```

<a id="color-feature-variable-_default-options"></a>

### $\_default-options

default options

+ **Group:** Color feature
+ **Access:** private

#### Type

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

<a id="color-feature-function-foreground"></a>

### @function foreground

return foreground color

+ **Group:** Color feature
+ **Access:** public

#### 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: foreground(#000);
}
```

css outputs

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

<a id="default-settings-variable-family"></a>

### $family

default font family.

**default**

+ `-apple-system` ... use "San Francisco" as primary font in mac

+ `BlinkMacSystemFont` ... use "San Francisco" as primary in chrome on mac

+ `Helvetica` ... secondary font in mac

+ `Arial` ... secondary font in windows

+ `Hiragino Kaku Gothic ProN` ... primary japanese font in mac

+ `Yu Gothic Medium` ... primary japanese font in windows

+ `游ゴシック Medium` ... primary japanese font in ie on windows

+ `YuGothic` ... secondary japanese font in mac

+ `Meiryo` ... secondary japanese font in windows

+ `メイリオ` ... secondary japanese font in ie on windows

+ **Group:** Default settings

+ **Access:** public

#### Type

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

<a id="default-settings-variable-family-monospace"></a>

### $family-monospace

default monospace font family.

**default**

+ `Consolas` ... primary font in windows (use it as primary if installed in mac)

+ `Monaco` ... primary font in mac

+ `Menlo` ... secondary font in mac

+ `Courier` ... secondary font in windows

+ **Group:** Default settings

+ **Access:** public

#### Type

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

<a id="default-settings-variable-base-size"></a>

### $base-size

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

+ **Group:** Default settings
+ **Access:** public

#### Type

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

<a id="default-settings-variable-size"></a>

### $size

default font size
(default: `14px`)

+ **Group:** Default settings
+ **Access:** public

#### Type

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

<a id="default-settings-variable-size-presets"></a>

### $size-presets

default font size presets

+ **Group:** Default settings
+ **Access:** public

#### Type

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

#### Properties

|Name|Type|Description|Default|
|:--|:--|:--|:--|
|`xsmall`|**[Number](https://sass-lang.com/documentation/values/numbers)**|size xsmall|`0.75`|
|`small`|**[Number](https://sass-lang.com/documentation/values/numbers)**|size small|`0.875`|
|`medium`|**[Number](https://sass-lang.com/documentation/values/numbers)**|size medium|`1`|
|`large`|**[Number](https://sass-lang.com/documentation/values/numbers)**|size large|`1.15`|
|`xlarge`|**[Number](https://sass-lang.com/documentation/values/numbers)**|size xlarge|`1.3`|
|`2xlarge`|**[Number](https://sass-lang.com/documentation/values/numbers)**|size 2xlarge|`1.45`|
|`3xlarge`|**[Number](https://sass-lang.com/documentation/values/numbers)**|size 3xlarge|`1.6`|
|`4xlarge`|**[Number](https://sass-lang.com/documentation/values/numbers)**|size 4xlarge|`1.75`|

<a id="default-settings-variable-enable-relative-size"></a>

### $enable-relative-size

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

+ **Group:** Default settings
+ **Access:** public

#### Type

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

<a id="default-settings-variable-prefix"></a>

### $prefix

prefix of class name of components
(default: `"unit"`)

+ **Group:** Default settings
+ **Access:** public

#### Type

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

#### Examples

scss inputs

```scss
$prefix: "u";
```

css outputs

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

<a id="default-settings-variable-breakpoints"></a>

### $breakpoints

default settings of breakpoints

+ **Group:** Default settings
+ **Access:** public

#### Type

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

#### Properties

|Name|Type|Description|Default|
|:--|:--|:--|:--|
|`desktop`|**[Number](https://sass-lang.com/documentation/values/numbers)**|breakpoint for desktop|`1024px`|
|`mobile`|**[Number](https://sass-lang.com/documentation/values/numbers)**|breakpoint for desktop|`667px`|

<a id="default-settings-variable-link-color"></a>

### $link-color

default link color

+ **Group:** Default settings
+ **Access:** public

#### Type

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

#### Properties

|Name|Type|Description|Default|
|:--|:--|:--|:--|
|`link`|**[Color](https://sass-lang.com/documentation/values/colors)**|color of `:link`|`#37a5e4`|
|`focus`|**[Color](https://sass-lang.com/documentation/values/colors)**|color of `:focus`|`#7ac3ed`|

<a id="default-settings-variable-letter-spacing"></a>

### $letter-spacing

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

+ **Group:** Default settings
+ **Access:** public

#### Type

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

<a id="default-settings-variable-line-height"></a>

### $line-height

default line-height
(default: `1.5`)

+ **Group:** Default settings
+ **Access:** public

#### Type

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

<a id="default-settings-variable-builtin-themes"></a>

### $builtin-themes

default builtin theme

+ **Group:** Default settings
+ **Access:** public

#### 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|`(...)`|

<a id="default-settings-variable-verbose"></a>

### $verbose

out warnings verbosily or not

+ **Group:** Default settings
+ **Access:** public

#### Type

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

<a id="default-settings-variable-focus"></a>

### $focus

settings of selector.
for expressing of state like `:hover` or `:focus`.
(default: `(".is-focus")`)

+ **Group:** Default settings
+ **Access:** public

#### Type

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

<a id="default-settings-variable-selected"></a>

### $selected

settings of selector
for expressing of state like `:checked`.
(default: `(".is-selected")`)

+ **Group:** Default settings
+ **Access:** public

#### Type

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

<a id="default-settings-variable-disabled"></a>

### $disabled

settings of selector.
for expressing of state like `:disabled`.
(default: `(".is-disabled")`)

+ **Group:** Default settings
+ **Access:** public

#### Type

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

<a id="default-settings-variable-current"></a>

### $current

settings of selector.
for expressing of state like `".is-current"`
(default: `(".is-current")`)

+ **Group:** Default settings
+ **Access:** public

#### Type

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

<a id="default-settings-variable-active"></a>

### $active

settings of selector.
for expressing of state like `is-active`.
(default: `(".is-active")`)

+ **Group:** Default settings
+ **Access:** public

#### Type

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

<a id="default-settings-variable-prefix"></a>

### $prefix

prefix of class name of util
(default: `"util"`)

+ **Group:** Default settings
+ **Access:** public

#### Type

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

#### Examples

scss inputs

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

css outputs

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

<a id="default-settings-variable-box-sizes"></a>

### $box-sizes

default values of width / height utilities

+ **Group:** Default settings
+ **Access:** public

#### Type

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

<a id="default-settings-variable-margin-values"></a>

### $margin-values

default values of margin

+ **Group:** Default settings
+ **Access:** public

#### Type

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

<a id="default-settings-variable-padding-values"></a>

### $padding-values

default values of padding

+ **Group:** Default settings
+ **Access:** public

#### Type

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

<a id="default-settings-variable-position-values"></a>

### $position-values

default values of position

+ **Group:** Default settings
+ **Access:** public

#### Type

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

<a id="default-settings-variable-z-index-values"></a>

### $z-index-values

default values of z-index

+ **Group:** Default settings
+ **Access:** public

#### Type

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

<a id="default-settings-variable-breakpoints"></a>

### $breakpoints

default breakpoints

+ **Group:** Default settings
+ **Access:** public

#### Type

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

<a id="features-variable-_default-font-applying-units"></a>

### $\_default-font-applying-units

default list of units that applying font

+ **Group:** Features
+ **Access:** private

#### Type

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

<a id="features-variable-_selectors"></a>

### $\_selectors

selectors

+ **Group:** Features
+ **Access:** private

#### Type

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

<a id="features-function-is-empty"></a>

### @function is-empty

> **DEPRECATED!**

value is empty or not

+ **Group:** Features
+ **Access:** public

#### 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: is-empty(""); // -> true
```

<a id="features-function-merge-state-selectors"></a>

### @function merge-state-selectors

> **DEPRECATED!**

return merged state selectors

+ **Group:** Features
+ **Access:** public

#### Parameters

|Name|Type|Description|Default|
|:--|:--|:--|:--|
|`$type`|**[String](https://sass-lang.com/documentation/values/strings)**|type of state (one of `"link"`, `"focus"`, `"selected"`, `"disabled"` or `"current"`)|`"link"`|
|`$additional-selectors`|**[List](https://sass-lang.com/documentation/values/lists)**|additional selectors|`()`|

#### Returns

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

#### Examples

scss inputs

```scss
$merged-focus-selectors: merge-state-selectors("link"); // -> (":link", ":visited")
```

<a id="features-function-px-to-rem"></a>

### @function px-to-rem

> **DEPRECATED!**

convert px to rem

+ **Group:** Features
+ **Access:** public

#### 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: px-to-rem(14px, 16px);
}
```

css outputs

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

<a id="features-function-ununit"></a>

### @function ununit

> **DEPRECATED!**

return number without unit

+ **Group:** Features
+ **Access:** public

#### 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: ununit(14px); // -> 14
```

<a id="features-mixin-bootstrap"></a>

### @mixin bootstrap

bootstrap

+ **Group:** Features
+ **Access:** public

#### Parameters

|Name|Type|Description|Default|
|:--|:--|:--|:--|
|`$enable-font-applying`|**[Boolean](https://sass-lang.com/documentation/values/booleans)**|enable applying font settings or not|`true`|
|`$enable-font-applying-feature-settings`|**[Boolean](https://sass-lang.com/documentation/values/booleans)**|enable applying font feature settings or not|`true`|
|`$font-applying-units`|**[List](https://sass-lang.com/documentation/values/lists)**|list of units that applying font|`true`|

#### Examples

scss inputs

```scss
@include bootstrap();
```

scss inputs

```scss
@include bootstrap() {
  // with appling additional settings to all units
};
```

<a id="features-mixin-define-breakpoint"></a>

### @mixin define-breakpoint

> **DEPRECATED!**

define breakepoint

+ **Group:** Features
+ **Access:** public

#### Parameters

|Name|Type|Description|Default|
|:--|:--|:--|:--|
|`$from`|**[Number](https://sass-lang.com/documentation/values/numbers)**, **[String](https://sass-lang.com/documentation/values/strings)**, **[Null](https://sass-lang.com/documentation/values/null)**|starting point of breakpoint|`null`|
|`$until`|**[Number](https://sass-lang.com/documentation/values/numbers)**, **[String](https://sass-lang.com/documentation/values/strings)**, **[Null](https://sass-lang.com/documentation/values/null)**|ending point of breakpoint|`null`|
|`$options`|**[Map](https://sass-lang.com/documentation/values/maps)**|options|`()`|
|`$options.media`|**[String](https://sass-lang.com/documentation/values/strings)**|custom media name|-|

#### Examples

scss inputs

```scss
.selector {
  @include define-breakpoint($from: "mobile", $until: "desktop") {
    font-size: 16px;
  }
}
```

css outputs

```css
@media only screen and (min-width: 667px) and (max-width: 1023px) {
  .selector {
    font-size: 16px;
  }
}
```

<a id="features-mixin-define-placeholder"></a>

### @mixin define-placeholder

> **DEPRECATED!**

define placeholder class.

+ **Group:** Features
+ **Access:** public

#### 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 define-placeholder($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;
}
```

<a id="features-mixin-define-sizes-in-direction-groups"></a>

### @mixin define-sizes-in-direction-groups

> **DEPRECATED!**

define sizes in direction groups

+ **Group:** Features
+ **Access:** public

#### Parameters

|Name|Type|Description|Default|
|:--|:--|:--|:--|
|`$type`|**[String](https://sass-lang.com/documentation/values/strings)**|type of options (one of `"margin"`, `"padding"`, `"position"` or `"border"`)|`"margin"`|
|`$values`|**[List](https://sass-lang.com/documentation/values/lists)**|list of value|`()`|

#### Examples

scss inputs

```scss
.selector {
  @include define-sizes-in-direction-groups($type: "margin", $values: (5px, -5px))
}
```

css outputs

```css
.selector-vertical-5 {
  margin-top: 5px !important;
  margin-bottom: 5px !important;
}
.selector-vertical-5- {
  margin-top: -5em !important;
  margin-bottom: -5em !important;
}
.selector-horizontal-5 {
  margin-right: 5px !important;
  margin-left: 5px !important;
}
.selector-horizontal-5- {
  margin-right: -5em !important;
  margin-left: -5em !important;
}
.selector-all-5 {
  margin-top: 5px !important;
  margin-right: 5px !important;
  margin-bottom: 5px !important;
  margin-left: 5px !important;
}
.selector-all-5- {
  margin-top: -5em !important;
  margin-right: -5em !important;
  margin-bottom: -5em !important;
  margin-left: -5em !important;
}
```

<a id="features-mixin-define-sizes-in-directions"></a>

### @mixin define-sizes-in-directions

> **DEPRECATED!**

define sizes in directions

+ **Group:** Features
+ **Access:** public

#### Parameters

|Name|Type|Description|Default|
|:--|:--|:--|:--|
|`$type`|**[String](https://sass-lang.com/documentation/values/strings)**|type of options (one of `"margin"`, `"padding"`, `"position"` or `"border"`)|`"margin"`|
|`$values`|**[List](https://sass-lang.com/documentation/values/lists)**|list of value|`()`|

#### Examples

scss inputs

```scss
.selector {
  @include define-sizes-in-directions($type: "margin", $values: (5px, -5px))
}
```

css outputs

```css
.selector-top-5 {
  margin-top: 5px !important;
}
.selector-top-5- {
  margin-top: -5px !important;
}
.selector-right-5 {
  margin-right: 5px !important;
}
.selector-right-5- {
  margin-right: -5px !important;
}
.selector-bottom-5 {
  margin-bottom: 5px !important;
}
.selector-bottom-5- {
  margin-bottom: -5px !important;
}
.selector-left-5 {
  margin-left: 5px !important;
}
.selector-left-5- {
  margin-left: -5px !important;
}
```

<a id="features-mixin-define-sizes"></a>

### @mixin define-sizes

> **DEPRECATED!**

define sizes

+ **Group:** Features
+ **Access:** public

#### Parameters

|Name|Type|Description|Default|
|:--|:--|:--|:--|
|`$type`|**[String](https://sass-lang.com/documentation/values/strings)**|type of options (one of `"width"`, `"height"` or `"z-index"`)|`"width"`|
|`$values`|**[List](https://sass-lang.com/documentation/values/lists)**|list of value|`()`|

#### Examples

scss inputs

```scss
.selector {
  @include define-sizes($type: "width", $values: (10px))
}
```

css outputs

```css
.selector-10 {
  width: 10px !important;
}
.selector-min-10 {
  min-width: 10px !important;
}
.selector-max-10 {
  max-width: 10px !important;
}
```

<a id="features-mixin-on-active"></a>

### @mixin on-active

wrappper of `is-active`

+ **Group:** Features
+ **Access:** public

#### 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 on-active() {
    font-size: 16px;
  }
}
```

css outputs

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

<a id="features-mixin-on-current"></a>

### @mixin on-current

wrappper of `.is-current`

+ **Group:** Features
+ **Access:** public

#### 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 on-current() {
    font-size: 16px;
  }
}
```

css outputs

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

<a id="features-mixin-on-deactive"></a>

### @mixin on-deactive

wrappper of `:not(is-active)`

+ **Group:** Features
+ **Access:** public

#### 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 on-deactive() {
    font-size: 16px;
  }
}
```

css outputs

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

<a id="features-mixin-on-disabled"></a>

### @mixin on-disabled

wrappper of `:disabled`

+ **Group:** Features
+ **Access:** public

#### 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 on-disabled() {
    font-size: 16px;
  }
}
```

css outputs

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

<a id="features-mixin-on-focus"></a>

### @mixin on-focus

wrappper of `:hover` and `:focus`

+ **Group:** Features
+ **Access:** public

#### 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 on-focus() {
    font-size: 16px;
  }
}
```

css outputs

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

<a id="features-mixin-on-link"></a>

### @mixin on-link

wrappper of `:link` and `:visited`

+ **Group:** Features
+ **Access:** public

#### 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 on-link() {
    font-size: 16px;
  }
}
```

css outputs

```css
.selector:link, .selector:visited {
  font-size: 16px;
}
```

<a id="features-mixin-on-placeholder"></a>

### @mixin on-placeholder

wrappper of `:placeholder-shown`

+ **Group:** Features
+ **Access:** public

#### Examples

scss inputs

```scss
.selector {
  @include 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;
}
```

<a id="features-mixin-on-print"></a>

### @mixin on-print

The wrapper of `@media print`

+ **Group:** Features
+ **Access:** public

#### Examples

scss inputs

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

css outputs

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

<a id="features-mixin-on"></a>

### @mixin on

wrappper of pseudo class like `:hover`

+ **Group:** Features
+ **Access:** public

#### 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|`()`|

#### Examples

scss inputs

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

css outputs

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

<a id="features-mixin-use-box-aspect-ratio"></a>

### @mixin use-box-aspect-ratio

> **DEPRECATED!**

use settings of aspect ratio box

+ **Group:** Features
+ **Access:** public

#### 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 use-box-aspect-ratio($width: 16, $height: 9);
}
```

css outputs

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

<a id="features-mixin-use-box-base"></a>

### @mixin use-box-base

> **DEPRECATED!**

use settings of initialized box

+ **Group:** Features
+ **Access:** public

#### Parameters

|Name|Type|Description|Default|
|:--|:--|:--|:--|
|`$display`|**[String](https://sass-lang.com/documentation/values/strings)**|setting for `display`|`"block"`|
|`$overflow`|**[String](https://sass-lang.com/documentation/values/strings)**|setting for `overflow`|`null`|
|`$box-sizing`|**[String](https://sass-lang.com/documentation/values/strings)**|setting for `box-sizing`|`"content-box"`|
|`$position`|**[String](https://sass-lang.com/documentation/values/strings)**|setting for `position`|`"relative"`|
|`$list-style`|**[String](https://sass-lang.com/documentation/values/strings)**|setting for `list-style`|`0`|
|`$margin`|**[Number](https://sass-lang.com/documentation/values/numbers)**, **[List](https://sass-lang.com/documentation/values/lists)**|setting for `margin`|`0`|
|`$padding`|**[Number](https://sass-lang.com/documentation/values/numbers)**, **[List](https://sass-lang.com/documentation/values/lists)**|setting for `padding`|`0`|
|`$border`|**[Number](https://sass-lang.com/documentation/values/numbers)**, **[List](https://sass-lang.com/documentation/values/lists)**|setting for `border`|`0`|

#### Examples

scss inputs

```scss
.selector {
  @include use-box-base();
}
```

css outputs

```css
.selector {
  display: block;
  box-sizing: content-box;
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
  border: 0;
}
```

<a id="features-mixin-use-clearfix"></a>

### @mixin use-clearfix

> **DEPRECATED!**

use clearfix

+ **Group:** Features
+ **Access:** public

#### Examples

scss inputs

```scss
.selector {
  @include use-clearfix();
}
```

css outputs

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

<a id="features-mixin-use-font-advanced-settings"></a>

### @mixin use-font-advanced-settings

> **DEPRECATED!**

use advanced settings of font

+ **Group:** Features
+ **Access:** public

#### Parameters

|Name|Type|Description|Default|
|:--|:--|:--|:--|
|`$feature-settings`|**[String](https://sass-lang.com/documentation/values/strings)**|setting for `font-feature-settings`|`"palt"`|

#### Examples

scss inputs

```scss
.selector {
  @include use-font-advanced-settings();
}
```

css outputs

```css
.selector {
  font-feature-settings: "palt";
  -ms-font-feature-settings: normal;
}
```

<a id="features-mixin-use-font-base"></a>

### @mixin use-font-base

> **DEPRECATED!**

use settings of initialized font

+ **Group:** Features
+ **Access:** public

#### Parameters

|Name|Type|Description|Default|
|:--|:--|:--|:--|
|`$style`|**[String](https://sass-lang.com/documentation/values/strings)**|setting for `font-style`|`"normal"`|
|`$weight`|**[String](https://sass-lang.com/documentation/values/strings)**, **[Number](https://sass-lang.com/documentation/values/numbers)**|setting for `font-weight`|`"normal"`|

#### Examples

scss inputs

```scss
.selector {
  @include use-font-base();
}
```

css outputs

```css
.selector {
  font-style: normal;
  font-weight: normal;
}
```

<a id="features-mixin-use-font-family"></a>

### @mixin use-font-family

> **DEPRECATED!**

use settings of `font-family`

+ **Group:** Features
+ **Access:** public

#### Parameters

|Name|Type|Description|Default|
|:--|:--|:--|:--|
|`$value`|**[List](https://sass-lang.com/documentation/values/lists)**, **[String](https://sass-lang.com/documentation/values/strings)**|setting for `font-family` (one of `"default"`, `"monospace"` or `(...)`)|`null`|
|`$important`|**[Boolean](https://sass-lang.com/documentation/values/booleans)**|set `!important` or not|`false`|

#### Examples

scss inputs

```scss
.selector {
  @include use-font-family($value: "default", $important: true);
}
```

css outputs

```css
.selector {
  font-family: -apple-system, BlinkMacSystemFont, Helvetica, Arial, "Hiragino Kaku Gothic ProN", "Yu Gothic Medium", "游ゴシック Medium", YuGothic, Meiryo, "メイリオ", sans-serif !important;
}
```

<a id="features-mixin-use-font-size"></a>

### @mixin use-font-size

> **DEPRECATED!**

use settings of font-size

+ **Group:** Features
+ **Access:** public

#### 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)|-|
|`$monospace`|**[Boolean](https://sass-lang.com/documentation/values/booleans)**|font-family is monospace or not|`false`|
|`$important`|**[Boolean](https://sass-lang.com/documentation/values/booleans)**|set !important or not|`false`|

#### Examples

scss inputs

```scss
.selector {
  @include use-font-size($value: "medium", $important: true);
}
```

css outputs

```css
.selector {
  font-size: 14px !important;
  font-size: 0.875rem !important;
}
```

<a id="features-mixin-use-table-base"></a>

### @mixin use-table-base

> **DEPRECATED!**

use settings of initialized table

+ **Group:** Features
+ **Access:** public

#### Parameters

|Name|Type|Description|Default|
|:--|:--|:--|:--|
|`$width`|**[Number](https://sass-lang.com/documentation/values/numbers)**, **[String](https://sass-lang.com/documentation/values/strings)**|setting for `width`|`"auto"`|
|`$margin`|**[Number](https://sass-lang.com/documentation/values/numbers)**, **[List](https://sass-lang.com/documentation/values/lists)**|setting for `margin`|`0`|
|`$padding`|**[Number](https://sass-lang.com/documentation/values/numbers)**, **[List](https://sass-lang.com/documentation/values/lists)**|setting for `padding`|`0`|
|`$border-style`|**[String](https://sass-lang.com/documentation/values/strings)**|setting for `border-style`|`"solid"`|
|`$border-width`|**[Number](https://sass-lang.com/documentation/values/numbers)**|setting for `border-width`|`1px`|

#### Examples

scss inputs

```scss
.selector {
  @include use-table-base();
}
```

css outputs

```css
.selector {
  display: table;
  width: auto;
  margin: 0;
  padding: 0;
  border-collapse: collapse;
  border-style: solid;
  border-width: 1px;
}
```

<a id="features-mixin-use-table-column-base"></a>

### @mixin use-table-column-base

> **DEPRECATED!**

use settings of initialized table column

+ **Group:** Features
+ **Access:** public

#### Parameters

|Name|Type|Description|Default|
|:--|:--|:--|:--|
|`$margin`|**[Number](https://sass-lang.com/documentation/values/numbers)**, **[List](https://sass-lang.com/documentation/values/lists)**|setting for `margin`|`0`|
|`$padding`|**[Number](https://sass-lang.com/documentation/values/numbers)**, **[List](https://sass-lang.com/documentation/values/lists)**|setting for `padding`|`0`|
|`$border-style`|**[String](https://sass-lang.com/documentation/values/strings)**|setting for `border-style`|`"solid"`|
|`$border-width`|**[Number](https://sass-lang.com/documentation/values/numbers)**|setting for `border-width`|`1px`|

#### Examples

scss inputs

```scss
.selector {
  @include use-table-column-base();
}
```

css outputs

```css
.selector {
  display: table-cell;
  margin: 0;
  padding: 0;
  vertical-align: middle;
  border-style: solid;
  border-width: 1px;
}
```

<a id="features-mixin-use-text-base"></a>

### @mixin use-text-base

> **DEPRECATED!**

use settings of initialized text

+ **Group:** Features
+ **Access:** public

#### Parameters

|Name|Type|Description|Default|
|:--|:--|:--|:--|
|`$letter-spacing`|**[Number](https://sass-lang.com/documentation/values/numbers)**|setting for `letter-spacing`|`settings.$letter-spacing`|
|`$line-height`|**[Number](https://sass-lang.com/documentation/values/numbers)**, **[String](https://sass-lang.com/documentation/values/strings)**|setting for `line-height`|`settings.$line-height`|
|`$text-align`|**[String](https://sass-lang.com/documentation/values/strings)**|setting for `text-align`|`"left"`|
|`$text-decoration`|**[String](https://sass-lang.com/documentation/values/strings)**|setting for `text-decoration`|`"none"`|
|`$text-indent`|**[Number](https://sass-lang.com/documentation/values/numbers)**|setting for `text-indent`|`0`|
|`$white-space`|**[String](https://sass-lang.com/documentation/values/strings)**|setting for `white-space`|`"normal"`|
|`$word-break`|**[String](https://sass-lang.com/documentation/values/strings)**|setting for `word-break`|`"break-all"`|
|`$word-wrap`|**[String](https://sass-lang.com/documentation/values/strings)**|setting for `word-wrap`|`"break-word"`|

#### Examples

scss inputs

```scss
.selector {
  @include use-text-base();
}
```

css outputs

```css
.selector {
  letter-spacing: 0.04em;
  line-height: 1.5;
  text-align: left;
  text-decoration: none;
  text-indent: 0;
  white-space: normal;
  word-break: break-all;
  word-wrap: break-word;
}
```

<a id="features-mixin-initialize-column"></a>

### @mixin initialize-column

initialize table column settings

+ **Group:** Features
+ **Access:** public

#### Parameters

|Name|Type|Description|Default|
|:--|:--|:--|:--|
|`$margin`|**[Number](https://sass-lang.com/documentation/values/numbers)**, **[List](https://sass-lang.com/documentation/values/lists)**|setting for `margin`|`0`|
|`$padding`|**[Number](https://sass-lang.com/documentation/values/numbers)**, **[List](https://sass-lang.com/documentation/values/lists)**|setting for `padding`|`0`|
|`$border-style`|**[String](https://sass-lang.com/documentation/values/strings)**|setting for `border-style`|`"solid"`|
|`$border-width`|**[Number](https://sass-lang.com/documentation/values/numbers)**|setting for `border-width`|`1px`|

#### Examples

scss inputs

```scss
.selector {
  @include initialize-column();
}
```

css outputs

```css
.selector {
  display: table-cell;
  margin: 0;
  padding: 0;
  vertical-align: middle;
  border-style: solid;
  border-width: 1px;
}
```

<a id="font-feature-variable-_default-options"></a>

### $\_default-options

default options

+ **Group:** Font feature
+ **Access:** private

#### Type

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

<a id="font-feature-function-size"></a>

### @function size

return real font-size

+ **Group:** Font feature
+ **Access:** public

#### 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: font-size($value: "medium");
}
```

css outputs

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

<a id="font-features-mixin-apply-family"></a>

### @mixin apply-family

apply font-family settings

+ **Group:** Font features
+ **Access:** public

#### Parameters

|Name|Type|Description|Default|
|:--|:--|:--|:--|
|`$value`|**[List](https://sass-lang.com/documentation/values/lists)**, **[String](https://sass-lang.com/documentation/values/strings)**|setting for `font-family` (one of `"default"`, `"monospace"` or `(...)`)|`null`|
|`$important`|**[Boolean](https://sass-lang.com/documentation/values/booleans)**|set `!important` or not|`false`|

#### Examples

scss inputs

```scss
.selector {
  @include apply-family($value: "default", $important: true);
}
```

css outputs

```css
.selector {
  font-family: -apple-system, BlinkMacSystemFont, Helvetica, Arial, "Hiragino Kaku Gothic ProN", "Yu Gothic Medium", "游ゴシック Medium", YuGothic, Meiryo, "メイリオ", sans-serif !important;
}
```

<a id="font-features-mixin-apply-feature-settings"></a>

### @mixin apply-feature-settings

apply font-feature-settings

+ **Group:** Font features
+ **Access:** public

#### Parameters

|Name|Type|Description|Default|
|:--|:--|:--|:--|
|`$feature-settings`|**[String](https://sass-lang.com/documentation/values/strings)**|setting for `font-feature-settings`|`"palt"`|

#### Examples

scss inputs

```scss
.selector {
  @include apply-feature-settings();
}
```

css outputs

```css
.selector {
  font-feature-settings: "palt";
  -ms-font-feature-settings: normal;
}
```

<a id="font-features-mixin-apply-size"></a>

### @mixin apply-size

apply font-size settings

+ **Group:** Font features
+ **Access:** public

#### 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)|-|
|`$monospace`|**[Boolean](https://sass-lang.com/documentation/values/booleans)**|font-family is monospace or not|`false`|
|`$important`|**[Boolean](https://sass-lang.com/documentation/values/booleans)**|set !important or not|`false`|

#### Examples

scss inputs

```scss
.selector {
  @include apply-size($value: "medium", $important: true);
}
```

css outputs

```css
.selector {
  font-size: 14px !important;
  font-size: 0.875rem !important;
}
```

<a id="font-features-mixin-apply-smoothing"></a>

### @mixin apply-smoothing

apply font-smoothing

+ **Group:** Font features
+ **Access:** public

#### Examples

scss inputs

```scss
.selector {
  @include apply-smoothing();
}
```

css outputs

```css
.selector {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
```

<a id="font-features-mixin-initialize"></a>

### @mixin initialize

use settings of initialized font

+ **Group:** Font features
+ **Access:** public

#### Parameters

|Name|Type|Description|Default|
|:--|:--|:--|:--|
|`$style`|**[String](https://sass-lang.com/documentation/values/strings)**|setting for `font-style`|`"normal"`|
|`$weight`|**[String](https://sass-lang.com/documentation/values/strings)**, **[Number](https://sass-lang.com/documentation/values/numbers)**|setting for `font-weight`|`"normal"`|

#### Examples

scss inputs

```scss
.selector {
  @include initialize();
}
```

css outputs

```css
.selector {
  font-style: normal;
  font-weight: normal;
}
```

<a id="list-feature-variable-_default-options"></a>

### $\_default-options

default options

+ **Group:** List feature
+ **Access:** private

#### Type

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

<a id="list-feature-function-concat-as-string"></a>

### @function concat-as-string

concatenate list as string

+ **Group:** List feature
+ **Access:** public

#### 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: concat-as-string(("hoge", "fuga", "piyo"), ":");
}
```

css outputs

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

<a id="list-feature-function-map"></a>

### @function map

map list

+ **Group:** List feature
+ **Access:** public

#### 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: map(
    ("hoge", "fuga", "pi", "yo"),
    meta.get-function("length", $module: "string")
  );
}
```

css outputs

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

<a id="math-features-function-px-to-rem"></a>

### @function px-to-rem

convert px to rem

+ **Group:** Math features
+ **Access:** public

#### 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: px-to-rem(14px, 16px);
}
```

css outputs

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

<a id="math-features-function-remove-unit"></a>

### @function remove-unit

return number without unit

+ **Group:** Math features
+ **Access:** public

#### 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: remove-unit(14px); // -> 14
```

<a id="meta-features-function-is-empty"></a>

### @function is-empty

value is empty or not

+ **Group:** Meta features
+ **Access:** public

#### 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: is-empty(""); // -> true
```

<a id="pict-feature-variable-_default-options"></a>

### $\_default-options

default options

+ **Group:** Pict feature
+ **Access:** private

#### Type

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

<a id="pict-feature-mixin-apply-flexible-size"></a>

### @mixin apply-flexible-size

apply flexible size to pict

+ **Group:** Pict feature
+ **Access:** public

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

<a id="placeholder-features-variable-_already-defined"></a>

### $\_already-defined

defined placeholders.

+ **Group:** Placeholder features
+ **Access:** private

#### Type

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

<a id="placeholder-features-mixin-define"></a>

### @mixin define

define placeholder class.

+ **Group:** Placeholder features
+ **Access:** public

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

<a id="plugin/spritesheet-variable-_default-options"></a>

### $\_default-options

default options

+ **Group:** Plugin/spritesheet
+ **Access:** private

#### Type

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

<a id="plugin/spritesheet-variable-_default-options"></a>

### $\_default-options

default options

+ **Group:** Plugin/spritesheet
+ **Access:** private

#### Type

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

<a id="plugin/spritesheet-variable-spritesheets"></a>

### $spritesheets

data store of sprite sheets

+ **Group:** Plugin/spritesheet
+ **Access:** public

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

<a id="plugin/spritesheet-function-get-sheet-by-type"></a>

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

get sheet by type from values of spritesheets

+ **Group:** Plugin/spritesheet
+ **Access:** private

#### 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)**

<a id="plugin/spritesheet-function-normalize"></a>

### @function normalize

normalize values of spritesheet

+ **Group:** Plugin/spritesheet
+ **Access:** private

#### 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)**

<a id="plugin/spritesheet-mixin-define"></a>

### @mixin define

define spritesheet

+ **Group:** Plugin/spritesheet
+ **Access:** public

#### 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 `"if-mobile"`)|`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 {
  overflow: hidden;
  text-indent: -100%;
  color: transparent;
  background-image: url(path/to/sprite/icon-image.png);
}
.selector-logo {
  width: 10px;
  height: 10px;
  background-position: -10px -10px;
  background-size: 30px 30px;
}
```

<a id="plugin/spritesheet-mixin-use-spritesheet"></a>

### @mixin use-spritesheet

> **DEPRECATED!**

use spritesheet rule

+ **Group:** Plugin/spritesheet
+ **Access:** public

#### 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 `"if-mobile"`)|`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.use-spritesheet($type: "icon-image", $name: "logo");
}
```

css outputs

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

<a id="plugin/spritesheet-mixin-define-item"></a>

### @mixin define-item

define item

+ **Group:** Plugin/spritesheet
+ **Access:** private

#### 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|`()`|

<a id="plugin/spritesheet-mixin-define-responsive-item"></a>

### @mixin define-responsive-item

define responsive item

+ **Group:** Plugin/spritesheet
+ **Access:** private

#### 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|`()`|

<a id="plugin/spritesheet-mixin-define-responsive-toggle-item"></a>

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

define responsive toggle item

+ **Group:** Plugin/spritesheet
+ **Access:** private

#### 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|`()`|

<a id="plugin/spritesheet-mixin-define-toggle-item"></a>

### @mixin define-toggle-item

define toggle item

+ **Group:** Plugin/spritesheet
+ **Access:** private

#### 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|`()`|

<a id="plugin/spritesheet-mixin-set-properties"></a>

### @mixin set-properties

set properties

+ **Group:** Plugin/spritesheet
+ **Access:** private

#### 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|`()`|

<a id="selector-features-variable-_supported-types"></a>

### $\_supported-types

supported types

+ **Group:** Selector features
+ **Access:** private

#### Type

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

<a id="selector-features-function-inverse"></a>

### @function inverse

return inverse selector

+ **Group:** Selector features
+ **Access:** public

#### Parameters

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

#### Examples

scss inputs

```scss
.selector {
  content: _inverse(".hoge")
}
```

css outputs

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

<a id="selector-features-function-merge-state"></a>

### @function merge-state

return merged state selectors

+ **Group:** Selector features
+ **Access:** public

#### Parameters

|Name|Type|Description|Default|
|:--|:--|:--|:--|
|`$type`|**[String](https://sass-lang.com/documentation/values/strings)**|type of state (one of `"link"`, `"focus"`, `"selected"`, `"disabled"` or `"current"`)|`"link"`|
|`$additional-selectors`|**[List](https://sass-lang.com/documentation/values/lists)**|additional selectors|`()`|

#### Returns

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

#### Examples

scss inputs

```scss
$merged-focus-selectors: merge-state("link"); // -> (":link", ":visited")
```

<a id="size-features-variable-_supported-types"></a>

### $\_supported-types

supported types

+ **Group:** Size features
+ **Access:** private

#### Type

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

<a id="size-features-variable-_direction-groups"></a>

### $\_direction-groups

direction groups

+ **Group:** Size features
+ **Access:** private

#### Type

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

<a id="size-features-variable-_default-border-size"></a>

### $\_default-border-size

default border size

+ **Group:** Size features
+ **Access:** private

#### Type

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

<a id="size-features-variable-_default-border-style"></a>

### $\_default-border-style

default border style

+ **Group:** Size features
+ **Access:** private

#### Type

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

<a id="size-features-variable-_default-border-color"></a>

### $\_default-border-color

default border color

+ **Group:** Size features
+ **Access:** private

#### Type

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

<a id="size-features-variable-_supported-types"></a>

### $\_supported-types

supported types

+ **Group:** Size features
+ **Access:** private

#### Type

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

<a id="size-features-variable-_directions"></a>

### $\_directions

directions

+ **Group:** Size features
+ **Access:** private

#### Type

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

<a id="size-features-variable-_default-border-size"></a>

### $\_default-border-size

default border size

+ **Group:** Size features
+ **Access:** private

#### Type

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

<a id="size-features-variable-_default-border-style"></a>

### $\_default-border-style

default border style

+ **Group:** Size features
+ **Access:** private

#### Type

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

<a id="size-features-variable-_default-border-color"></a>

### $\_default-border-color

default border color

+ **Group:** Size features
+ **Access:** private

#### Type

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

<a id="size-features-variable-_supported-types"></a>

### $\_supported-types

supported types

+ **Group:** Size features
+ **Access:** private

#### Type

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

<a id="size-features-mixin-define-by-direction-group"></a>

### @mixin define-by-direction-group

define sizes in direction groups

+ **Group:** Size features
+ **Access:** public

#### Parameters

|Name|Type|Description|Default|
|:--|:--|:--|:--|
|`$type`|**[String](https://sass-lang.com/documentation/values/strings)**|type of options (one of `"margin"`, `"padding"`, `"position"` or `"border"`)|`"margin"`|
|`$values`|**[List](https://sass-lang.com/documentation/values/lists)**|list of value|`()`|
|`$breakpoints`|**[Map](https://sass-lang.com/documentation/values/maps)**|mappings of breakpoints|`null`|

#### Examples

scss inputs

```scss
.selector {
  @include define-by-direction-group($type: "padding", $values: (5px,), $breakpoints: ("if-mobile": ("until": "mobile")))
}
```

css outputs

```css
.selector-vertical-5 {
  padding-top: 5px !important;
  padding-bottom: 5px !important;
}
@media only screen and (max-width: 666px) {
  .selector-vertical-5-if-mobile {
    padding-top: 5px !important;
    padding-bottom: 5px !important;
  }
}
.selector-horizontal-5 {
  padding-right: 5px !important;
  padding-left: 5px !important;
}
@media only screen and (max-width: 666px) {
  .selector-horizontal-5-if-mobile {
    padding-right: 5px !important;
    padding-left: 5px !important;
  }
}
.selector-all-5 {
  padding-top: 5px !important;
  padding-right: 5px !important;
  padding-bottom: 5px !important;
  padding-left: 5px !important;
}
@media only screen and (max-width: 666px) {
  .selector-all-5-if-mobile {
    padding-top: 5px !important;
    padding-right: 5px !important;
    padding-bottom: 5px !important;
    padding-left: 5px !important;
  }
}
```

<a id="size-features-mixin-define-by-direction"></a>

### @mixin define-by-direction

define sizes by directions

+ **Group:** Size features
+ **Access:** public

#### Parameters

|Name|Type|Description|Default|
|:--|:--|:--|:--|
|`$type`|**[String](https://sass-lang.com/documentation/values/strings)**|type of options (one of `"margin"`, `"padding"`, `"position"` or `"border"`)|`"margin"`|
|`$values`|**[List](https://sass-lang.com/documentation/values/lists)**|list of value|`()`|
|`$breakpoints`|**[Map](https://sass-lang.com/documentation/values/maps)**|mappings of breakpoints|`null`|

#### Examples

scss inputs

```scss
.selector {
  @include define-by-direction($type: "padding", $values: (5px,), $breakpoints: ("if-mobile": ("until": "mobile")))
}
```

css outputs

```css
.selector-top-5 {
  padding-top: 5px !important;
}
@media only screen and (max-width: 666px) {
  .selector-top-5-if-mobile {
    padding-top: 5px !important;
   }
}
.selector-right-5 {
  padding-right: 5px !important;
}
@media only screen and (max-width: 666px) {
  .selector-right-5-if-mobile {
    padding-right: 5px !important;
  }
}
.selector-bottom-5 {
  padding-bottom: 5px !important;
}
@media only screen and (max-width: 666px) {
  .selector-bottom-5-if-mobile {
    padding-bottom: 5px !important;
  }
}
.selector-left-5 {
  padding-left: 5px !important;
}
@media only screen and (max-width: 666px) {
  .selector-left-5-