@hidoo/unit

Sass based css framework.

Demo

• Style Guide (Generated by kss-node)

Installation

$ npm install @hidoo/unit

Usage

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

Use with @hidoo/sass-importer

@use "@hidoo/unit";

Usage with custom settings

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

Usage only the required units

// 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

Migration 0.4.4 to 0.6.x higher

TODO

API

@mixin apply-aspect-ratio

apply aspect ratio settings

• Group: Box features
• Access: public

Parameters

|Name|Type|Description|Default| |:--|:--|:--|:--| |$width|Number|width|16| |$height|Number|height|9|

Examples

scss inputs

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

css outputs

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

@mixin apply-clearfix

apply clearfix

• Group: Box features
• Access: public

Examples

scss inputs

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

css outputs

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

@mixin initialize

initialize box settings

• Group: Box features
• Access: public

Parameters

|Name|Type|Description|Default| |:--|:--|:--|:--| |$display|String|setting for display|"block"| |$overflow|String|setting for overflow|null| |$box-sizing|String|setting for box-sizing|"content-box"| |$position|String|setting for position|"relative"| |$list-style|String|setting for list-style|0| |$margin|Number, List|setting for margin|0| |$padding|Number, List|setting for padding|0| |$border|Number, List|setting for border|0|

Examples

scss inputs

.selector {
  @include initialize();
}

css outputs

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

@mixin define

define breakepoint

• Group: Breakpoint features
• Access: public

Parameters

|Name|Type|Description|Default| |:--|:--|:--|:--| |$from|Number, String, Null|starting point of breakpoint|null| |$until|Number, String, Null|ending point of breakpoint|null| |$options|Map|options|()| |$options.media|String|custom media name|-|

Examples

scss inputs

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

css outputs

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

$_default-options

default options

• Group: Color feature
• Access: private

Type

Map

@function foreground

return foreground color

• Group: Color feature
• Access: public

Parameters

|Name|Type|Description|Default| |:--|:--|:--|:--| |$background-color|Color|background-color|-| |$options|Map|options|()| |$options.threshold|Number|threshold|60%| |$options.color-mappings|Map|color mappings|-| |$options.color-mappings.dark|Map|dark color|settings.$color-scheme.black| |$options.color-mappings.light|Map|light color|settings.$color-scheme.white|

Returns

Color foreground color

Examples

scss inputs

.selector {
  content: foreground(#000);
}

css outputs

.selector {
  content: #fff;
}

$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

$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

$base-size

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

• Group: Default settings
• Access: public

Type

Number

$size

default font size (default: 14px)

• Group: Default settings
• Access: public

Type

Number

$size-presets

default font size presets

• Group: Default settings
• Access: public

Type

Map

Properties

|Name|Type|Description|Default| |:--|:--|:--|:--| |xsmall|Number|size xsmall|0.75| |small|Number|size small|0.875| |medium|Number|size medium|1| |large|Number|size large|1.15| |xlarge|Number|size xlarge|1.3| |2xlarge|Number|size 2xlarge|1.45| |3xlarge|Number|size 3xlarge|1.6| |4xlarge|Number|size 4xlarge|1.75|

$enable-relative-size

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

• Group: Default settings
• Access: public

Type

Boolean

$prefix

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

• Group: Default settings
• Access: public

Type

String

Examples

scss inputs

$prefix: "u";

css outputs

.u-icon {
  /* settings */
}

$breakpoints

default settings of breakpoints

• Group: Default settings
• Access: public

Type

Map

Properties

|Name|Type|Description|Default| |:--|:--|:--|:--| |desktop|Number|breakpoint for desktop|1024px| |mobile|Number|breakpoint for desktop|667px|

$link-color

default link color

• Group: Default settings
• Access: public

Type

Map

Properties

|Name|Type|Description|Default| |:--|:--|:--|:--| |link|Color|color of :link|#37a5e4| |focus|Color|color of :focus|#7ac3ed|

$letter-spacing

default letter-spacing (default: 0.04em)

• Group: Default settings
• Access: public

Type

Number

$line-height

default line-height (default: 1.5)

• Group: Default settings
• Access: public

Type

Number

$builtin-themes

default builtin theme

• Group: Default settings
• Access: public

Type

Map

Properties

|Name|Type|Description|Default| |:--|:--|:--|:--| |light|Map|values of light theme|(...)| |dark|Map|values of dark theme|(...)|

$verbose

out warnings verbosily or not

• Group: Default settings
• Access: public

Type

Boolean

$focus

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

• Group: Default settings
• Access: public

Type

List

$selected

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

• Group: Default settings
• Access: public

Type

List

$disabled

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

• Group: Default settings
• Access: public

Type

List

$current

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

• Group: Default settings
• Access: public

Type

List

$active

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

• Group: Default settings
• Access: public

Type

List

$prefix

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

• Group: Default settings
• Access: public

Type

String

Examples

scss inputs

$util-prefix: "h";

css outputs

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

$box-sizes

default values of width / height utilities

• Group: Default settings
• Access: public

Type

List

$margin-values

default values of margin

• Group: Default settings
• Access: public

Type

List

$padding-values

default values of padding

• Group: Default settings
• Access: public

Type

List

$position-values

default values of position

• Group: Default settings
• Access: public

Type

List

$z-index-values

default values of z-index

• Group: Default settings
• Access: public

Type

List

$breakpoints

default breakpoints

• Group: Default settings
• Access: public

Type

Map

$_default-font-applying-units

default list of units that applying font

• Group: Features
• Access: private

Type

List

$_selectors

selectors

• Group: Features
• Access: private

Type

List

@function is-empty

DEPRECATED!

value is empty or not

• Group: Features
• Access: public

Parameters

|Name|Type|Description|Default| |:--|:--|:--|:--| |$value|String, Number, List, Map|test value|-|

Returns

Boolean value is empty or not

Examples

scss inputs

$result: is-empty(""); // -> true

@function merge-state-selectors

DEPRECATED!

return merged state selectors

• Group: Features
• Access: public

Parameters

|Name|Type|Description|Default| |:--|:--|:--|:--| |$type|String|type of state (one of "link", "focus", "selected", "disabled" or "current")|"link"| |$additional-selectors|List|additional selectors|()|

Returns

List

Examples

scss inputs

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

@function px-to-rem

DEPRECATED!

convert px to rem

• Group: Features
• Access: public

Parameters

|Name|Type|Description|Default| |:--|:--|:--|:--| |$size|Number|font size|-| |$base-size|Number|base font size|settings.$font-base-size|

Returns

Number rem value

Examples

scss inputs

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

css outputs

.selector {
  font-size: 0.875rem;
}

@function ununit

DEPRECATED!

return number without unit

• Group: Features
• Access: public

Parameters

|Name|Type|Description|Default| |:--|:--|:--|:--| |$number|Number|number with unit|-|

Returns

Number number without unit

Examples

scss inputs

$pure-number: ununit(14px); // -> 14

@mixin bootstrap

bootstrap

• Group: Features
• Access: public

Parameters

|Name|Type|Description|Default| |:--|:--|:--|:--| |$enable-font-applying|Boolean|enable applying font settings or not|true| |$enable-font-applying-feature-settings|Boolean|enable applying font feature settings or not|true| |$font-applying-units|List|list of units that applying font|true|

Examples

scss inputs

@include bootstrap();

scss inputs

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

@mixin define-breakpoint

DEPRECATED!

define breakepoint

• Group: Features
• Access: public

Parameters

|Name|Type|Description|Default| |:--|:--|:--|:--| |$from|Number, String, Null|starting point of breakpoint|null| |$until|Number, String, Null|ending point of breakpoint|null| |$options|Map|options|()| |$options.media|String|custom media name|-|

Examples

scss inputs

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

css outputs

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

@mixin define-placeholder

DEPRECATED!

define placeholder class.

• Group: Features
• Access: public

Parameters

|Name|Type|Description|Default| |:--|:--|:--|:--| |$name|String|name of placeholder class|-|

Examples

scss inputs

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

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

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

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

css outputs

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

@mixin define-sizes-in-direction-groups

DEPRECATED!

define sizes in direction groups

• Group: Features
• Access: public

Parameters

|Name|Type|Description|Default| |:--|:--|:--|:--| |$type|String|type of options (one of "margin", "padding", "position" or "border")|"margin"| |$values|List|list of value|()|

Examples

scss inputs

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

css outputs

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

@mixin define-sizes-in-directions

DEPRECATED!

define sizes in directions

• Group: Features
• Access: public

Parameters

|Name|Type|Description|Default| |:--|:--|:--|:--| |$type|String|type of options (one of "margin", "padding", "position" or "border")|"margin"| |$values|List|list of value|()|

Examples

scss inputs

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

css outputs

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

@mixin define-sizes

DEPRECATED!

define sizes

• Group: Features
• Access: public

Parameters

|Name|Type|Description|Default| |:--|:--|:--|:--| |$type|String|type of options (one of "width", "height" or "z-index")|"width"| |$values|List|list of value|()|

Examples

scss inputs

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

css outputs

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

@mixin on-active

wrappper of is-active

• Group: Features
• Access: public

Parameters

|Name|Type|Description|Default| |:--|:--|:--|:--| |$additional-selectors|List|list of additional selectors|()| |$capturing-selectors|List|capturing parent selectors|()|

Examples

scss inputs

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

css outputs

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

@mixin on-current

wrappper of .is-current

• Group: Features
• Access: public

Parameters

|Name|Type|Description|Default| |:--|:--|:--|:--| |$additional-selectors|List|list of additional selectors|()| |$capturing-selectors|List|capturing parent selectors|()|

Examples

scss inputs

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

css outputs

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

@mixin on-deactive

wrappper of :not(is-active)

• Group: Features
• Access: public

Parameters

|Name|Type|Description|Default| |:--|:--|:--|:--| |$additional-selectors|List|list of additional selectors|()| |$capturing-selectors|List|capturing parent selectors|()|

Examples

scss inputs

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

css outputs

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

@mixin on-disabled

wrappper of :disabled

• Group: Features
• Access: public

Parameters

|Name|Type|Description|Default| |:--|:--|:--|:--| |$additional-selectors|List|list of additional selectors|()| |$capturing-selectors|List|capturing parent selectors|()|

Examples

scss inputs

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

css outputs

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

@mixin on-focus

wrappper of :hover and :focus

• Group: Features
• Access: public

Parameters

|Name|Type|Description|Default| |:--|:--|:--|:--| |$additional-selectors|List|list of additional selectors|()| |$capturing-selectors|List|capturing parent selectors|()|

Examples

scss inputs

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

css outputs

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

@mixin on-link

wrappper of :link and :visited

• Group: Features
• Access: public

Parameters

|Name|Type|Description|Default| |:--|:--|:--|:--| |$additional-selectors|List|list of additional selectors|()| |$capturing-selectors|List|capturing parent selectors|()|

Examples

scss inputs

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

css outputs

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

@mixin on-placeholder

wrappper of :placeholder-shown

• Group: Features
• Access: public

Examples

scss inputs

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

css outputs

.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

• Group: Features
• Access: public

Examples

scss inputs

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

css outputs

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

@mixin on

wrappper of pseudo class like :hover

• Group: Features
• Access: public

Parameters

|Name|Type|Description|Default| |:--|:--|:--|:--| |$selectors|List|list of selectors|()| |$capturing-selectors|List|capturing parent selectors|()|

Examples

scss inputs

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

css outputs

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

@mixin use-box-aspect-ratio

DEPRECATED!

use settings of aspect ratio box

• Group: Features
• Access: public

Parameters

|Name|Type|Description|Default| |:--|:--|:--|:--| |$width|Number|width|16| |$height|Number|height|9|

Examples

scss inputs

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

css outputs

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

@mixin use-box-base

DEPRECATED!

use settings of initialized box

• Group: Features
• Access: public

Parameters

|Name|Type|Description|Default| |:--|:--|:--|:--| |$display|String|setting for display|"block"| |$overflow|String|setting for overflow|null| |$box-sizing|String|setting for box-sizing|"content-box"| |$position|String|setting for position|"relative"| |$list-style|String|setting for list-style|0| |$margin|Number, List|setting for margin|0| |$padding|Number, List|setting for padding|0| |$border|Number, List|setting for border|0|

Examples

scss inputs

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

css outputs

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

@mixin use-clearfix

DEPRECATED!

use clearfix

• Group: Features
• Access: public

Examples

scss inputs

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

css outputs

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

@mixin use-font-advanced-settings

DEPRECATED!

use advanced settings of font

• Group: Features
• Access: public

Parameters

|Name|Type|Description|Default| |:--|:--|:--|:--| |$feature-settings|String|setting for font-feature-settings|"palt"|

Examples

scss inputs

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

css outputs

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

@mixin use-font-base

DEPRECATED!

use settings of initialized font

• Group: Features
• Access: public

Parameters

|Name|Type|Description|Default| |:--|:--|:--|:--| |$style|String|setting for font-style|"normal"| |$weight|String, Number|setting for font-weight|"normal"|

Examples

scss inputs

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

css outputs

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

@mixin use-font-family

DEPRECATED!

use settings of font-family

• Group: Features
• Access: public

Parameters

|Name|Type|Description|Default| |:--|:--|:--|:--| |$value|List, String|setting for font-family (one of "default", "monospace" or (...))|null| |$important|Boolean|set !important or not|false|

Examples

scss inputs

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

css outputs

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

@mixin use-font-size

DEPRECATED!

use settings of font-size

• Group: Features
• Access: public

Parameters

|Name|Type|Description|Default| |:--|:--|:--|:--| |$value|String, Number|value of font-size (one of "xsmall", "small", "medium", "large", "xlarge", "2xlarge", "3xlarge", "4xlarge" or number)|-| |$monospace|Boolean|font-family is monospace or not|false| |$important|Boolean|set !important or not|false|

Examples

scss inputs

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

css outputs

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

@mixin use-table-base

DEPRECATED!

use settings of initialized table

• Group: Features
• Access: public

Parameters

|Name|Type|Description|Default| |:--|:--|:--|:--| |$width|Number, String|setting for width|"auto"| |$margin|Number, List|setting for margin|0| |$padding|Number, List|setting for padding|0| |$border-style|String|setting for border-style|"solid"| |$border-width|Number|setting for border-width|1px|

Examples

scss inputs

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

css outputs

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

@mixin use-table-column-base

DEPRECATED!

use settings of initialized table column

• Group: Features
• Access: public

Parameters

|Name|Type|Description|Default| |:--|:--|:--|:--| |$margin|Number, List|setting for margin|0| |$padding|Number, List|setting for padding|0| |$border-style|String|setting for border-style|"solid"| |$border-width|Number|setting for border-width|1px|

Examples

scss inputs

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

css outputs

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

@mixin use-text-base

DEPRECATED!

use settings of initialized text

• Group: Features
• Access: public

Parameters

|Name|Type|Description|Default| |:--|:--|:--|:--| |$letter-spacing|Number|setting for letter-spacing|settings.$letter-spacing| |$line-height|Number, String|setting for line-height|settings.$line-height| |$text-align|String|setting for text-align|"left"| |$text-decoration|String|setting for text-decoration|"none"| |$text-indent|Number|setting for text-indent|0| |$white-space|String|setting for white-space|"normal"| |$word-break|String|setting for word-break|"break-all"| |$word-wrap|String|setting for word-wrap|"break-word"|

Examples

scss inputs

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

css outputs

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

@mixin initialize-column

initialize table column settings

• Group: Features
• Access: public

Parameters

|Name|Type|Description|Default| |:--|:--|:--|:--| |$margin|Number, List|setting for margin|0| |$padding|Number, List|setting for padding|0| |$border-style|String|setting for border-style|"solid"| |$border-width|Number|setting for border-width|1px|

Examples

scss inputs

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

css outputs

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

$_default-options

default options

• Group: Font feature
• Access: private

Type

Map

@function size

return real font-size

• Group: Font feature
• Access: public

Parameters

|Name|Type|Description|Default| |:--|:--|:--|:--| |$value|String, Number|value of font-size (one of "xsmall", "small", "medium", "large", "xlarge", "2xlarge", "3xlarge", "4xlarge" or number)|-| |$options|Map|options|()| |$options.monospace|Boolean|font-family is monospace or not|false| |$options.relative-size|Boolean|convert to rem value or not|false|

Returns

Number real font-size

Examples

scss inputs

.selector {
  font-size: font-size($value: "medium");
}

css outputs

.selector {
  font-size: 14px;
}

@mixin apply-family

apply font-family settings

• Group: Font features
• Access: public

Parameters

|Name|Type|Description|Default| |:--|:--|:--|:--| |$value|List, String|setting for font-family (one of "default", "monospace" or (...))|null| |$important|Boolean|set !important or not|false|

Examples

scss inputs

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

css outputs

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

@mixin apply-feature-settings

apply font-feature-settings

• Group: Font features
• Access: public

Parameters

|Name|Type|Description|Default| |:--|:--|:--|:--| |$feature-settings|String|setting for font-feature-settings|"palt"|

Examples

scss inputs

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

css outputs

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

@mixin apply-size

apply font-size settings

• Group: Font features
• Access: public

Parameters

|Name|Type|Description|Default| |:--|:--|:--|:--| |$value|String, Number|value of font-size (one of "xsmall", "small", "medium", "large", "xlarge", "2xlarge", "3xlarge", "4xlarge" or number)|-| |$monospace|Boolean|font-family is monospace or not|false| |$important|Boolean|set !important or not|false|

Examples

scss inputs

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

css outputs

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

@mixin apply-smoothing

apply font-smoothing

• Group: Font features
• Access: public

Examples

scss inputs

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

css outputs

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

@mixin initialize

use settings of initialized font

• Group: Font features
• Access: public

Parameters

|Name|Type|Description|Default| |:--|:--|:--|:--| |$style|String|setting for font-style|"normal"| |$weight|String, Number|setting for font-weight|"normal"|

Examples

scss inputs

.selector {
  @include initialize();
}

css outputs

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

$_default-options

default options

• Group: List feature
• Access: private

Type

Map

@function concat-as-string

concatenate list as string

• Group: List feature
• Access: public

Parameters

|Name|Type|Description|Default| |:--|:--|:--|:--| |$list|List|list|-| |$separator|String|separator|","|

Returns

String concatenated list

Examples

scss inputs

.selector {
  content: concat-as-string(("hoge", "fuga", "piyo"), ":");
}

css outputs

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

@function map

map list

• Group: List feature
• Access: public

Parameters

|Name|Type|Description|Default| |:--|:--|:--|:--| |$list|List|list|-| |$callback|Function|function called each items|-|

Returns

List mapped list

Examples

scss inputs

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

css outputs

.selector {
  content: 4 4 2 2;
}

@function px-to-rem

convert px to rem

• Group: Math features
• Access: public

Parameters

|Name|Type|Description|Default| |:--|:--|:--|:--| |$size|Number|font size|-| |$base-size|Number|base font size|settings.$font-base-size|

Returns

Number rem value

Examples

scss inputs

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

css outputs

.selector {
  font-size: 0.875rem;
}

@function remove-unit

return number without unit

• Group: Math features
• Access: public

Parameters

|Name|Type|Description|Default| |:--|:--|:--|:--| |$number|Number|number with unit|-|

Returns

Number number without unit

Examples

scss inputs

$pure-number: remove-unit(14px); // -> 14

@function is-empty

value is empty or not

• Group: Meta features
• Access: public

Parameters

|Name|Type|Description|Default| |:--|:--|:--|:--| |$value|String, Number, List, Map|test value|-|

Returns

Boolean value is empty or not

Examples

scss inputs

$result: is-empty(""); // -> true

$_default-options

default options

• Group: Pict feature
• Access: private

Type

Map

@mixin apply-flexible-size

apply flexible size to pict

• Group: Pict feature
• Access: public

Parameters

|Name|Type|Description|Default| |:--|:--|:--|:--| |$width|Number|width|16| |$height|Number|height|9| |$options|Map|height|-| |$options.use-object-fit|Boolean|use object-fit|false|

Examples

scss inputs

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

css outputs

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

$_already-defined

defined placeholders.

• Group: Placeholder features
• Access: private

Type

List

@mixin define

define placeholder class.

• Group: Placeholder features
• Access: public

Parameters

|Name|Type|Description|Default| |:--|:--|:--|:--| |$name|String|name of placeholder class|-|

Examples

scss inputs

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

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

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

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

css outputs

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

$_default-options

default options

• Group: Plugin/spritesheet
• Access: private

Type

Map

$_default-options

default options

• Group: Plugin/spritesheet
• Access: private

Type

Map

$spritesheets

data store of sprite sheets

• Group: Plugin/spritesheet
• Access: public

Type

List, Map

Examples

scss inputs

// 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

• Group: Plugin/spritesheet
• Access: private

Parameters

|Name|Type|Description|Default| |:--|:--|:--|:--| |$type|String|type of spritesheet|-| |$spritesheets|Map|data of spritesheets|()|

Returns

Map, Null

@function normalize

normalize values of spritesheet

• Group: Plugin/spritesheet
• Access: private

Parameters

|Name|Type|Description|Default| |:--|:--|:--|:--| |$values|Map, List|values of spritesheet|()|

Returns

Map, Null

@mixin define

define spritesheet

• Group: Plugin/spritesheet
• Access: public

Parameters

|Name|Type|Description|Default| |:--|:--|:--|:--| |$type|String|type of spritesheet|-| |$name|String|name of spritesheet item|-| |$options|Map|options|()| |$options.use2x|Boolean|use 2x image or (one of true, false or "if-mobile")|false| |$options.as-mask|Boolean|use as mask image or not|false| |$options.responsive|Boolean|responsive or not|false| |$options.toggle|Boolean|toggle or not|false| |$options.capturing-selectors|List|capturing parent selectors|("a", "button")|

Examples

scss inputs

// 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

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

@mixin use-spritesheet

DEPRECATED!

use spritesheet rule

• Group: Plugin/spritesheet
• Access: public

Parameters

|Name|Type|Description|Default| |:--|:--|:--|:--| |$type|String|type of spritesheet|-| |$name|String|name of spritesheet item|-| |$options|Map|options|()| |$options.use2x|Boolean|use 2x image or (one of true, false or "if-mobile")|false| |$options.as-mask|Boolean|use as mask image or not|false| |$options.responsive|Boolean|responsive or not|false| |$options.toggle|Boolean|toggle or not|false| |$options.capturing-selectors|List|capturing parent selectors|("a", "button")|

Examples

scss inputs

// 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

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

@mixin define-item

define item

• Group: Plugin/spritesheet
• Access: private

Parameters

|Name|Type|Description|Default| |:--|:--|:--|:--| |$name|String|name of spritesheet item|-| |$items|Map|spritesheet items|()| |$options|Map|options|()|

@mixin define-responsive-item

define responsive item

• Group: Plugin/spritesheet
• Access: private

Parameters

|Name|Type|Description|Default| |:--|:--|:--|:--| |$name|String|name of spritesheet item|-| |$items|Map|spritesheet items|()| |$options|Map|options|()|

@mixin define-responsive-toggle-item

define responsive toggle item

• Group: Plugin/spritesheet
• Access: private

Parameters

|Name|Type|Description|Default| |:--|:--|:--|:--| |$name|String|name of spritesheet item|-| |$items|Map|spritesheet items|()| |$options|Map|options|()|

@mixin define-toggle-item

define toggle item

• Group: Plugin/spritesheet
• Access: private

Parameters

|Name|Type|Description|Default| |:--|:--|:--|:--| |$name|String|name of spritesheet item|-| |$items|Map|spritesheet items|()| |$options|Map|options|()|

@mixin set-properties

set properties

• Group: Plugin/spritesheet
• Access: private

Parameters

|Name|Type|Description|Default| |:--|:--|:--|:--| |$values|Map|values of item|()| |$options|Map|options|()|

$_supported-types

supported types

• Group: Selector features
• Access: private

Type

List

@function inverse

return inverse selector

• Group: Selector features
• Access: public

Parameters

|Name|Type|Description|Default| |:--|:--|:--|:--| |$selector|String|selector|-|

Examples

scss inputs

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

css outputs

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

@function merge-state

return merged state selectors

• Group: Selector features
• Access: public

Parameters

|Name|Type|Description|Default| |:--|:--|:--|:--| |$type|String|type of state (one of "link", "focus", "selected", "disabled" or "current")|"link"| |$additional-selectors|List|additional selectors|()|

Returns

List

Examples

scss inputs

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

$_supported-types

supported types

• Group: Size features
• Access: private

Type

List

$_direction-groups

direction groups

• Group: Size features
• Access: private

Type

List

$_default-border-size

default border size

• Group: Size features
• Access: private

Type

Number

$_default-border-style

default border style

• Group: Size features
• Access: private

Type

String

$_default-border-color

default border color

• Group: Size features
• Access: private

Type

Color

$_supported-types

supported types

• Group: Size features
• Access: private

Type

List

$_directions

directions

• Group: Size features
• Access: private

Type

List

$_default-border-size

default border size

• Group: Size features
• Access: private

Type

Number

$_default-border-style

default border style

• Group: Size features
• Access: private

Type

String

$_default-border-color

default border color

• Group: Size features
• Access: private

Type

Color

$_supported-types

supported types

• Group: Size features
• Access: private

Type

List

@mixin define-by-direction-group

define sizes in direction groups

• Group: Size features
• Access: public

Parameters

|Name|Type|Description|Default| |:--|:--|:--|:--| |$type|String|type of options (one of "margin", "padding", "position" or "border")|"margin"| |$values|List|list of value|()| |$breakpoints|Map|mappings of breakpoints|null|

Examples

scss inputs

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

css outputs

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

@mixin define-by-direction

define sizes by directions

• Group: Size features
• Access: public

Parameters

|Name|Type|Description|Default| |:--|:--|:--|:--| |$type|String|type of options (one of "margin", "padding", "position" or "border")|"margin"| |$values|List|list of value|()| |$breakpoints|Map|mappings of breakpoints|null|

Examples

scss inputs

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

css outputs

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