breakpoint

variables

breakpoints

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

Description

ブレークポイント

mixins

min

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

Description

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

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$key-value`	$breakpointsのキーまたは幅の値	`String`	— none
`$type`	メディアタイプ	`String` or `Null`	`null`

Example

scss

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

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

.element2 {
  @include breakpoint.min(1024px) {
    width: 100%;
  }
}

.mediatype {
  @include breakpoint.min('tab', 'screen, print') {
    color: #f00;
  }
}

css

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

@media (1024px <= width) {
  .element2 {
    width: 100%;
  }
}

@media screen, print and (768px <= width) {
  .mediatype {
    color: #f00;
  }
}

min-legacy

@mixin min-legacy() { ... }

Description

min-width版将来的に削除

Parameters

None.

max

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

Description

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

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$key-value`	$breakpointsのキーまたは幅の値	`String`	— none
`$type`	メディアタイプ	`String` or `Null`	`null`

Example

scss

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

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

.element2 {
  @include breakpoint.max(600px) {
    width: 100%;
  }
}

.mediatype {
  @include breakpoint.max('tab', 'screen, print') {
    color: #f00;
  }
}

css

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

@media (width <= 600px) {
  .element2 {
    width: 100%;
  }
}

@media screen, print and (width < 1200px) {
  .mediatype {
    color: #f00;
  }
}

max-legacy

@mixin max-legacy() { ... }

Description

max-width版将来的に削除

Parameters

None.

only

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

Description

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

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$key`	$breakpointsのキー	`String`	— none
`$type`	メディアタイプ	`String` or `Null`	`null`

Example

scss

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

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

.mediatype {
  @include breakpoint.only('tab', 'screen, print') {
    color: #f00;
  }
}

css

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

@media screen, print and (768px <= width < 1200px) {
  .mediatype {
    color: #f00;
  }
}

between

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

Description

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

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$min-key-value`	適用したい最小の$breakpointsのキーまたは幅の値	`String`	— none
`$max-key-value`	適用したい最大の$breakpointsのキーまたは幅の値	`String`	— none
`$type`	メディアタイプ	`String` or `Null`	`null`

Example

scss

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

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

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

.mediatype {
  @include breakpoint.between('sm', 'lg', 'screen, print') {
    color: #f00;
  }
}

css

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

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

@media screen, print and (480px <= width < 1200px) {
  .mediatype {
    color: #f00;
  }
}

color

variables

colors

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

Description

色

functions

get

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

Description

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

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$key`	色名	`String`	— none

Returns

Color —

カラーコード

hover

mixins

media

@mixin media() { ... }

Description

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

Parameters

None.

Example

scss

@use 'sass-utils/hover';

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

css

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

this

@mixin this() { ... }

Description

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

Parameters

None.

Example

scss

@use 'sass-utils/hover';

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

css

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

unit

variables

base-font-size

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

Description

基準フォントサイズ

functions

rem

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

Description

px値をrem値に変換する

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$px`	px値 (単位は省略可)	`Number`	— none
`$basis`	変換基準値 (単位は省略可)	`Number`	`$base-font-size`

Returns

Number —

rem値

per

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

Description

px値を%値に変換する

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$px`	変換対象値 (単位は省略可)	`Number`	— none
`$basis`	変換基準値 (単位は省略可)	`Number`	— none

Returns

Number —

%値

vw

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

Description

px値をvw値に変換する

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$px`	変換対象値 (単位は省略可)	`Number`	— none
`$basis`	変換基準値 (単位は省略可)	`Number`	— none

Returns

Number —

vw値

vh

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

Description

px値をvh値に変換する

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$px`	変換対象値 (単位は省略可)	`Number`	— none
`$basis`	変換基準値 (単位は省略可)	`Number`	— none

Returns

Number —

vh値

strip

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

Description

数値から単位を取り除く

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$value`	単位付きの数値	`Number`	— none

Returns

Number —

単位を取り除いた数値

abs-to-rel

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

Description

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

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$abs`	変換対象値 (単位は省略可)	`Number`	— none
`$basis`	変換基準値 (単位は省略可)	`Number`	— none
`$per`	百分率の形式（%の単位なし）で返す場合はtrueを指定する	`Boolean`	`false`

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

parameter Name	parameter Description	parameter Type	parameter Default value
`$key`	$z-indexesのいずれかのキー	`String`	— none
`$index`	ここで指定した値を加算した結果を出力する（負の値の場合は減算）	`Number`	`0`

Returns

Number —

z-index値