breakpoint

variables

breakpoints

$breakpoints: (
  'sp': 0,
  'tab': 768px,
  'pc': 1200px,
) !default;

Description

ブレークポイント

print-min-width

$print-min-width: 768px !default;

Description

印刷対象にするメディアクエリの最低幅
各mixinのmin-widthに相当する値がここで指定した値以上の場合、ブレークポイントに関係なく印刷時にスタイルが適用される
ただし個別に印刷時にスタイルを適用するかどうかを指定した場合はその設定が優先される
この機能を無効化する場合はfalseを指定する

mixins

min

@mixin min($key-value, $print: null) { ... }

Description

幅が指定したブレークポイント以上の場合にスタイルを適用する

Parameters

NameDescriptionTypeDefault value
$key-value

$breakpointsのキーまたは幅の値

String—
$print

印刷時にスタイルを適用するかどうか true=適用する false=適用しない null=ブレークポイントや用紙サイズによる

Boolean or Nullnull

Example

scss

@use '@iwbc/sass-utils/scss/breakpoint' with (
  $breakpoints: ('sp': 0, 'lgsp': 420px, 'tab': 768px),
  $print-min-width: 768px
);

.lgsp {
  @include breakpoint.min('lgsp') {
    width: 50%;
  }
}

.tab {
  @include breakpoint.min('tab') {
    width: 50%;
  }
}

.any {
  @include breakpoint.min(1024px) {
    width: 50%;
  }
}

.print {
  @include breakpoint.min('lgsp', true) {
    width: 50%;
  }
}

.no-print {
  @include breakpoint.min('tab', false) {
    width: 50%;
  }
}

css

@media (420px <= width) {
  .lgsp {
    width: 50%;
  }
}

@media print, (768px <= width) {
  .tab {
    width: 50%;
  }
}

@media print, (1024px <= width) {
  .any {
    width: 50%;
  }
}

@media print, (420px <= width) {
  .print {
    width: 50%;
  }
}

@media screen and (768px <= width) {
  .no-print {
    width: 50%;
  }
}

max

@mixin max($key-value, $print: null) { ... }

Description

幅が指定したブレークポイント以下の場合にスタイルを適用する

Parameters

NameDescriptionTypeDefault value
$key-value

$breakpointsのキーまたは幅の値

String—
$print

印刷時にスタイルを適用するかどうか true=適用する false=適用しない null=ブレークポイントや用紙サイズによる

Boolean or Nullnull

Example

scss

@use '@iwbc/sass-utils/scss/breakpoint' with (
  $breakpoints: ('sp': 0, 'tab': 768px),
  $print-min-width: 768px
);

.sp {
  @include breakpoint.max('sp') {
    width: 50%;
  }
}

.any {
  @include breakpoint.max(1200px) {
    width: 50%;
  }
}

.print {
  @include breakpoint.max('sp', true) {
    width: 50%;
  }
}

.no-print {
  @include breakpoint.max('sp', false) {
    width: 50%;
  }
}

css

@media (width < 768px) {
  .sp {
    width: 50%;
  }
}

@media (width <= 1200px) {
  .any {
    width: 50%;
  }
}

@media print, (width < 768px) {
  .print {
    width: 50%;
  }
}

@media screen and (width < 768px) {
  .no-print {
    width: 50%;
  }
}

only

@mixin only($key, $print: null) { ... }

Description

幅が指定したブレークポイントの場合にスタイルを適用する

Parameters

NameDescriptionTypeDefault value
$key

$breakpointsのキー

String—
$print

印刷時にスタイルを適用するかどうか true=適用する false=適用しない null=ブレークポイントや用紙サイズによる

Boolean or Nullnull

Example

scss

@use '@iwbc/sass-utils/scss/breakpoint' with (
  $breakpoints: ('sp': 0, 'tab': 768px, 'pc': 1200px)
);

.tab {
  @include breakpoint.only('tab') {
    width: 50%;
  }
}

.print {
  @include breakpoint.only('tab', true) {
    width: 50%;
  }
}

.no-print {
  @include breakpoint.only('tab', false) {
    width: 50%;
  }
}

css

@media (768px <= width < 1200px) {
  .tab {
    width: 50%;
  }
}

@media print, (768px <= width < 1200px) {
  .print {
    width: 50%;
  }
}

@media screen and (768px <= width < 1200px) {
  .no-print {
    width: 50%;
  }
}

between

@mixin between($min-key-value, $max-key-value, $print: null) { ... }

Description

幅が指定した2つのブレークポイントの範囲内の場合にスタイルを適用する

Parameters

NameDescriptionTypeDefault value
$min-key-value

適用したい最小の$breakpointsのキーまたは幅の値

String—
$max-key-value

適用したい最大の$breakpointsのキーまたは幅の値

String—
$print

印刷時にスタイルを適用するかどうか true=適用する false=適用しない null=ブレークポイントや用紙サイズによる

Boolean or Nullnull

Example

scss

@use '@iwbc/sass-utils/scss/breakpoint' with (
  $breakpoints: $breakpoints: (
    'xs': 0,
    'sm': 480px,
    'md': 768px,
    'lg': 960px,
    'xl': 1200px,
  )
);

.sm-lg {
  @include breakpoint.between('sm', 'lg') {
    width: 50%;
  }
}

.any {
  @include breakpoint.between(1024px, 1440px) {
    width: 50%;
  }
}

.print {
  @include breakpoint.between('sm', 'lg', true) {
    width: 50%;
  }
}

.no-print {
  @include breakpoint.between('sm', 'lg', false) {
    width: 50%;
  }
}

css

@media (480px <= width < 1200px) {
  .sm-lg {
    width: 50%;
  }
}

@media (1024px <= width <= 1440px) {
  .any {
    width: 50%;
  }
}

@media print, (480px <= width < 1200px) {
  .print {
    width: 50%;
  }
}

@media screen and (480px <= width < 1200px) {
  .no-print {
    width: 50%;
  }
}

color

variables

colors

$colors: (
  'black': #000,
  'white': #fff,
) !default;

Description

色

functions

get

@function get($key) { ... }

Description

指定した色名のカラーコードを取得する

Parameters

NameDescriptionTypeDefault value
$key

色名

String—

Returns

Color —

カラーコード

mixins

cssvars

@mixin cssvars() { ... }

Description

すべての色をCSS変数として出力する

Parameters

None.

Example

scss

@use '@iwbc/sass-utils/scss/color' with (
  $colors: ('black': #000, 'white': #fff)
)

:root {
   @include color.css-variables;
}

css

:root {
  --color-black: #000;
  --color-black-rgb: 0 0 0;
  --color-white: #fff;
  --color-white-rgb: 255 255 255;
}

easing

variables

easings

$easings: (
  'ease-in-sine': cubic-bezier(0.47, 0, 0.745, 0.715),
  'ease-out-sine': cubic-bezier(0.39, 0.575, 0.565, 1),
  'ease-in-out-sine': cubic-bezier(0.445, 0.05, 0.55, 0.95),
  'ease-in-quad': cubic-bezier(0.55, 0.085, 0.68, 0.53),
  'ease-out-quad': cubic-bezier(0.25, 0.46, 0.45, 0.94),
  'ease-in-out-quad': cubic-bezier(0.455, 0.03, 0.515, 0.955),
  'ease-in-cubic': cubic-bezier(0.55, 0.055, 0.675, 0.19),
  'ease-out-cubic': cubic-bezier(0.215, 0.61, 0.355, 1),
  'ease-in-out-cubic': cubic-bezier(0.645, 0.045, 0.355, 1),
  'ease-in-quart': cubic-bezier(0.895, 0.03, 0.685, 0.22),
  'ease-out-quart': cubic-bezier(0.165, 0.84, 0.44, 1),
  'ease-in-out-quart': cubic-bezier(0.77, 0, 0.175, 1),
  'ease-in-quint': cubic-bezier(0.755, 0.05, 0.855, 0.06),
  'ease-out-quint': cubic-bezier(0.23, 1, 0.32, 1),
  'ease-in-out-quint': cubic-bezier(0.86, 0, 0.07, 1),
  'ease-in-expo': cubic-bezier(0.95, 0.05, 0.795, 0.035),
  'ease-out-expo': cubic-bezier(0.19, 1, 0.22, 1),
  'ease-in-out-expo': cubic-bezier(1, 0, 0, 1),
  'ease-in-circ': cubic-bezier(0.6, 0.04, 0.98, 0.335),
  'ease-out-circ': cubic-bezier(0.075, 0.82, 0.165, 1),
  'ease-in-out-circ': cubic-bezier(0.785, 0.135, 0.15, 0.86),
  'ease-in-back': cubic-bezier(0.6, -0.28, 0.735, 0.045),
  'ease-out-back': cubic-bezier(0.175, 0.885, 0.32, 1.275),
  'ease-in-out-back': cubic-bezier(0.68, -0.55, 0.265, 1.55),
) !default;

Description

easing function

functions

get

@function get($key) { ... }

Description

指定したキーのeasing functionを取得する

Parameters

NameDescriptionTypeDefault value
$key

$easingsのいずれかのキー

String—

Returns

String —

easing function

hover

mixins

any

@mixin any() { ... }

Description

hoverが利用できるデバイスかつマウスなど正確なポインターデバイスがある場合のみスタイルを適用するメディアクエリーを出力する

Parameters

None.

Example

scss

@use '@iwbc/sass-utils/scss/hover';

a {
  @include hover.any {
    &:hover {
      text-decoration: underline;
    }
  }
}

css

@media (any-hover: hover) {
  a:hover {
    text-decoration: underline;
  }
}

this

@mixin this() { ... }

Description

hoverが利用できるデバイスかつマウスなど正確なポインターデバイスがある場合のみスタイルを適用するメディアクエリーと&:hoverセレクタを出力する

Parameters

None.

Example

scss

@use '@iwbc/sass-utils/scss/hover';

a {
  @include hover.this {
    text-decoration: underline;
  }
}

css

@media (any-hover: hover) {
  a:hover {
    text-decoration: underline;
  }
}

unit

variables

base-font-size

$base-font-size: 16px !default;

Description

基準フォントサイズ

base-width

$base-width: 375px !default;

Description

vw変換の基準値

base-height

$base-height: 667px !default;

Description

vh変換の基準値

functions

rem

@function rem($px, $basis: $base-font-size) { ... }

Description

px値をrem値に変換する

Parameters

NameDescriptionTypeDefault value
$px

px値 (単位は省略可)

Number—
$basis

変換基準値 (単位は省略可)

Number$base-font-size

Returns

Number —

rem値

per

@function per($px, $basis) { ... }

Description

px値を%値に変換する

Parameters

NameDescriptionTypeDefault value
$px

変換対象値 (単位は省略可)

Number—
$basis

変換基準値 (単位は省略可)

Number—

Returns

Number —

%値

vw

@function vw($px, $basis: $base-width, $unit: 'lvw') { ... }

Description

px値をvw値に変換する

Parameters

NameDescriptionTypeDefault value
$px

変換対象値 (単位は省略可)

Number—
$basis

変換基準値 (単位は省略可)

Number$base-width
$unit

単位（vw, svw, lvw, dvw）

String'lvw'

Returns

Number —

vw値

vh

@function vh($px, $basis: $base-height, $unit: 'lvh') { ... }

Description

px値をvh値に変換する

Parameters

NameDescriptionTypeDefault value
$px

変換対象値 (単位は省略可)

Number—
$basis

変換基準値 (単位は省略可)

Number$base-height
$unit

単位（vh, svh, lvh, dvh）

String'lvh'

Returns

Number —

vh値

strip

@function strip($value) { ... }

Description

数値から単位を取り除く

Parameters

NameDescriptionTypeDefault value
$value

単位付きの数値

Number—

Returns

Number —

単位を取り除いた数値

abs-to-rel

@function abs-to-rel($abs, $basis, $per: false) { ... }

Description

絶対単位の値から相対単位の値に変換する

Parameters

NameDescriptionTypeDefault value
$abs

変換対象値 (単位は省略可)

Number—
$basis

変換基準値 (単位は省略可)

Number—
$per

百分率の形式（%の単位なし）で返す場合はtrueを指定する

Booleanfalse

Returns

Number —

0〜1または0〜100の数値

z

variables

z-indexes

$z-indexes: (
  'overlay': 10000,
) !default;

Description

z-index

functions

get

@function get($key, $index: 0) { ... }

Description

指定した名前のz-index値を取得する

Parameters

NameDescriptionTypeDefault value
$key

$z-indexesのいずれかのキー

String—
$index

ここで指定した値を加算した結果を出力する（負の値の場合は減算）

Number0

Returns

Number —

z-index値