@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-if-mobile {
    padding-left: 5px !important;
  }
}

@mixin define

define sizes

• Group: Size 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	()
$breakpoints	Map	mappings of breakpoints	null

Examples

scss inputs

.selector {
  @include define($type: "width", $values: (10px), $breakpoints: ("if-mobile": ("until": "mobile")))
}

css outputs

.selector-10 {
  width: 10px !important;
}
@media only screen and (max-width: 666px) {
  .selector-10-if-mobile {
    width: 10px !important;
  }
}
.selector-min-10 {
  min-width: 10px !important;
}
@media only screen and (max-width: 666px) {
  .selector-min-10-if-mobile {
    min-width: 10px !important;
  }
}
.selector-max-10 {
  max-width: 10px !important;
}
@media only screen and (max-width: 666px) {
  .selector-max-10-if-mobile {
    max-width: 10px !important;
  }
}

$_mappings

percent-encoding mappings

• Group: String feature
• Access: private

Type

Map

$_default-options

default options

• Group: String feature
• Access: private

Type

Map

@function encode-url

return url encoded string

• Group: String feature
• Access: public

Parameters

Name	Type	Description	Default
$string	String	string	-

Returns

String url encoded string

Examples

scss inputs

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

css outputs

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

@function replace

replace string

• Group: String feature
• Access: public

Parameters

Name	Type	Description	Default
$string	String	string	-
$search	String	substring to replace	-
$replace	String	replacement string	""
$options	Map	options	()

Returns

String replaced string

Examples

scss inputs

.selector {
  content: replace("hogefugapiyohogefugapiyo", "fuga", "FUGA");
}

css outputs

.selector {
  content: hogeFUGApiyohogeFUGApiyo;
}

@function sprintf

sprintf

• Group: String feature
• Access: public

Parameters

Name	Type	Description	Default
$format	String	format	-
$args	List	arguments	-

Returns

String formatted string

Examples

scss inputs

.selector {
  content: sprintf("%s is small capital of %s.", "fuga", "FUGA");
}

css outputs

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

@mixin initialize

initialized table settings

• Group: Table 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 initialize();
}

css outputs

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

@mixin apply-line-truncate

apply multi line truncate

• Group: Text feature
• Access: public

Parameters

Name	Type	Description	Default
$line	Number	line length	2

Examples

scss inputs

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

css outputs

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

@mixin initialize

initialized text settings

• Group: Text 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 initialize();
}

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

$_default-range

default z-index range

• Group: Z-index feature
• Access: private

Type

List

$_types

content types

• Group: Z-index feature
• Access: private

Type

Map

$_default-options

default options

• Group: Z-index feature
• Access: private

Type

Map

@function reserve

reserve z-index value each by types

• Group: Z-index feature
• Access: public

Parameters

Name	Type	Description	Default
$type	String	content type name	-
$index	Number	index number	-
$options	Map	options	-
$options.debug	Boolean	debug flag	false

Returns

Number z-index value

Examples

scss inputs

.selector {
  content: reserve("floating", 100);
}

css outputs

.selector {
  content: 2000100;
}

Test

$ yarn test

License

MIT