lasagna_docs

variable

$sp-size $pc-size $pc-sm-size $pc-md-size $pc-lg-size $hd-size $sp-over-size $pc-sm-over-size $pc-md-over-size $pc-lg-over-size $hd-over-size $pc-sm-only-size $pc-md-only-size $pc-lg-only-size $hd-only-size

mixin

custom-view respond-to sp-view tablet-size pc-view pc-sm-view pc-md-view pc-lg-view hd-view sp-view-over pc-sm-view-over pc-md-view-over pc-lg-view-over hd-view-over pc-sm-view-only pc-md-view-only pc-lg-view-only hd-view-only safari-view portrait-view landscape-view no-scrollbar gap full-screen full-screen fit-size size flex-middle absolute-middle transform-middle default-padding default-width text-outline test-border text-overflow text-inherit aspect-ratio slider-horizontal fix-width fix-height hover-el mouse-on mouse-off

function

color-alpha rem

$sp-size

スマートフォン用のメディアクエリ

Original Source code

$sp-size: "(max-width: 750px)"

$pc-size

PC（デスクトップ）用のメディアクエリ

Original Source code

$pc-size: "(min-width: 751px)"

$pc-sm-size

小型PC用のメディアクエリ（992px以下）

Original Source code

$pc-sm-size: "(max-width: 992px)"

$pc-md-size

中型PC用のメディアクエリ（1200px以下）

Original Source code

$pc-md-size: "(max-width: 1200px)"

$pc-lg-size

大型PC用のメディアクエリ（1580px以下）

Original Source code

$pc-lg-size: "(max-width: 1580px)"

$hd-size

HDサイズ用のメディアクエリ（1920px以下）

Original Source code

$hd-size: "(max-width: 1920px)"

$sp-over-size

スマートフォン以上のサイズを対象としたメディアクエリ

Original Source code

$sp-over-size: "(min-width: 751px)"

$pc-sm-over-size

小型PC以上のサイズを対象としたメディアクエリ

Original Source code

$pc-sm-over-size: "(min-width: 993px)"

$pc-md-over-size

中型PC以上のサイズを対象としたメディアクエリ

Original Source code

$pc-md-over-size: "(min-width: 1201px)"

$pc-lg-over-size

大型PC以上のサイズを対象としたメディアクエリ

Original Source code

$pc-lg-over-size: "(min-width: 1581px)"

$hd-over-size

HDサイズ以上のサイズを対象としたメディアクエリ

Original Source code

$hd-over-size: "(min-width: 1921px)"

$pc-sm-only-size

小型PCのみを対象としたメディアクエリ

Original Source code

$pc-sm-only-size: "(min-width: 751px) and (max-width: 992px)"

$pc-md-only-size

中型PCのみを対象としたメディアクエリ

Original Source code

$pc-md-only-size: "(min-width: 993px) and (max-width: 1200px)"

$pc-lg-only-size

大型PCのみを対象としたメディアクエリ

Original Source code

$pc-lg-only-size: "(min-width: 1201px) and (max-width: 1580px)"

$hd-only-size

HDサイズのみを対象としたメディアクエリ

Original Source code

$hd-only-size: "(min-width: 1581px) and (max-width: 1920px)"

custom-view

任意のサイズ変数に基づいてメディアクエリを定義するためのミックスイン。

Parameters

Name Type Description

$size String メディアクエリサイズ文字列。

Example Usage 

+custom-view($sp-size)
	font-size: 14px

Original Source code

=custom-view($size)
  +respond-to("(max-width: #{$size})")
    @content

respond-to

メディアクエリを適用するための基本ミックスイン。

Parameters

Name Type Description

$media String メディアクエリ文字列。

Example Usage 

+respond-to("(min-width: 768px)")
	font-size: 16px

Original Source code

=respond-to($media)
  @media #{$media}
    @content

sp-view

スマートフォン用スタイル (max-width: 750px) をターゲットにするミックスイン。

Example Usage 

+sp-view
	font-size: 14px

Original Source code

=sp-view
  +respond-to($sp-size)
    @content

tablet-size

タブレット用スタイル (max-width: 770px) をターゲットにするミックスイン。

Example Usage 

+tablet-size
	font-size: 15px

Original Source code

=tablet-size
  +respond-to("(max-width: 770px)")
    @content

pc-view

PCビュー用スタイル (min-width: 751px) をターゲットにするミックスイン。

Example Usage 

+pc-view
	font-size: 16px

Original Source code

=pc-view
  +respond-to($pc-size)
    @content

pc-sm-view

小型PC用のスタイル (max-width: 992px) をターゲットにするミックスイン。

Example Usage 

+pc-sm-view
	font-size: 15px

Original Source code

=pc-sm-view
  +respond-to($pc-sm-size)
    @content

pc-md-view

中型PC用のスタイル (max-width: 1200px) をターゲットにするミックスイン。

Example Usage 

+pc-md-view
	font-size: 16px

Original Source code

=pc-md-view
  +respond-to($pc-md-size)
    @content

pc-lg-view

大型PC用のスタイル (max-width: 1580px) をターゲットにするミックスイン。

Example Usage 

+pc-lg-view
	font-size: 17px

Original Source code

=pc-lg-view
  +respond-to($pc-lg-size)
    @content

hd-view

HDサイズ用のスタイル (max-width: 1920px) をターゲットにするミックスイン。

Example Usage 

+hd-view
	font-size: 18px

Original Source code

=hd-view
  +respond-to($hd-size)
    @content

sp-view-over

スマートフォン以上のデバイス用スタイル (min-width: 751px) をターゲットにするミックスイン。

Original Source code

=sp-view-over
  +respond-to($sp-over-size)
    @content

pc-sm-view-over

小型PC以上のデバイス用スタイル (min-width: 993px) をターゲットにするミックスイン。

Original Source code

=pc-sm-view-over
  +respond-to($pc-sm-over-size)
    @content

pc-md-view-over

中型PC以上のデバイス用スタイル (min-width: 1201px) をターゲットにするミックスイン。

Original Source code

=pc-md-view-over
  +respond-to($pc-md-over-size)
    @content

pc-lg-view-over

大型PC以上のデバイス用スタイル (min-width: 1581px) をターゲットにするミックスイン。

Original Source code

=pc-lg-view-over
  +respond-to($pc-lg-over-size)
    @content

hd-view-over

HDサイズ以上のデバイス用スタイル (min-width: 1921px) をターゲットにするミックスイン。

Original Source code

=hd-view-over
  +respond-to($hd-over-size)
    @content

pc-sm-view-only

小型PCのみのスタイル (751px ~ 992px) をターゲットにするミックスイン。

Original Source code

=pc-sm-view-only
  +respond-to($pc-sm-only-size)
    @content

pc-md-view-only

中型PCのみのスタイル (993px ~ 1200px) をターゲットにするミックスイン。

Original Source code

=pc-md-view-only
  +respond-to($pc-md-only-size)
    @content

pc-lg-view-only

大型PCのみのスタイル (1201px ~ 1580px) をターゲットにするミックスイン。

Original Source code

=pc-lg-view-only
  +respond-to($pc-lg-only-size)
    @content

hd-view-only

HDサイズのみのスタイル (1581px ~ 1920px) をターゲットにするミックスイン。

Original Source code

=hd-view-only
  +respond-to($hd-only-size)
    @content

safari-view

Safari専用のスタイルをターゲットにするミックスイン。

Example Usage 

+safari-view
	color: blue;

Original Source code

=safari-view
  @at-root _::-webkit-full-page-media, _:future, :root &
    @content

portrait-view

画面が縦向きの時用スタイルをターゲットにするミックスイン。

Example Usage 

+portrait-view
	background-color: lightgray

Original Source code

=portrait-view
  @media screen and (orientation: portrait)
    @content

landscape-view

画面が横向きの時用スタイルをターゲットにするミックスイン。

Example Usage 

+landscape-view
	background-color: lightgray

Original Source code

=landscape-view
  @media screen and (orientation: landscape)
    @content

no-scrollbar

スクロールバーを非表示にするミックスイン。

Example Usage 

+no-scrollbar

Original Source code

=no-scrollbar
  -ms-overflow-style: none
  scrollbar-width: none
  &::-webkit-scrollbar
    display: none

gap

要素と要素の間に隙間を生成するミックスイン。
right, left, bottom, top の方向を指定することができる。
正の数、負の数の両方に対応しているが、cssの変数には対応していない。

Parameters

Name Type Description

$direction String メイン軸方向。

$num Number メイン軸方向のマージン。数値

$num String メイン軸方向のマージン。CSS変数も使えます。

$reverse String 逆軸方向のマージン。

Example Usage 

+gap(right, 1rem, reverse)
	+gap(left, 1rem)
	+gap(left, var(--margin-2,20rem))
	+gap(bottom, -10rem) // 負の数もいける

Original Source code

=gap($direction: right, $num: 1rem, $reverse: none)
  display: flex
  --gap: #{$num}
  flex-direction: #{if($direction == right, if($reverse == reverse, 'row-reverse', 'row'), if($reverse == reverse, 'column-reverse', 'column'))}
  $margin-set: if($reverse == reverse, 'first-child', 'last-child')
  $margin-direction: if($direction == right or $direction == left, 'left', 'top')
  @if meta.type-of($num) == "number"
    @if $num != 0rem and $num != 0px
      @if $num < 0
        * + *
          margin-#{$margin-direction}: var(--gap)
      @else
        gap: var(--gap)
  @else
    gap: var(--gap)

full-screen

フルスクリーン用スタイル (max-width: 100svw) をターゲットにするミックスイン。

Example Usage 

+full-screen

Original Source code

=full-size
  height: 100%
  width: 100%

full-screen

フルスクリーン用スタイル (max-width: 100svw) をターゲットにするミックスイン。

Example Usage 

+full-screen

Original Source code

=full-screen
  height: 100svh
  width: 100svw

fit-size

フィットサイズ用スタイル (fit-content) をターゲットにするミックスイン。

Example Usage 

+fit-size

Original Source code

=fit-size
  height: fit-content
  width: fit-content

size

サイズ設定用スタイル (width, height) をターゲットにするミックスイン。

Parameters

Name Type Description

$width Number サイズ設定用の幅。

$height Number サイズ設定用の高さ。

Example Usage 

.container-full
	+size(100%)
	.container-aspect
	+size(100%, calc(100% * 9 / 16))

Original Source code

=size($width: auto, $height: $width)
  width: $width
  height: $height

flex-middle

中央寄せ用スタイル (display: flex, justify-content: center, align-items: center) をターゲットにするミックスイン。

Example Usage 

+flex-middle

Original Source code

=flex-middle
  display: flex
  justify-content: center
  align-items: center

absolute-middle

中央寄せ用スタイル (position: absolute, inset: 0, margin: auto) をターゲットにするミックスイン。

Example Usage 

+absolute-middle

Original Source code

=absolute-middle
  position: absolute
  inset: 0
  margin: auto

transform-middle

コンテンツの中央寄せ用スタイル (position: absolute, top: 50%, left: 50%, transform: translate(-50%, -50%)) をターゲットにするミックスイン。

Example Usage 

+transform-middle

Original Source code

=transform-middle
  position: absolute
  top: 50%
  left: 50%
  transform: translate(-50%, -50%)

default-padding

コンテナをpaddingを使って中央寄せにする

Parameters

Name Type Description

$margin Number 中央寄せ用のマージン。

Example Usage 

+default-padding(var(--margin-1))

Original Source code

=default-padding($margin)
  width: 100svw
  --padding-inline: #{$margin}
  padding-right: var(--padding-inline)
  padding-inline: var(--padding-inline)

default-width

コンテナをmarginとmax-widthを使って中央に寄せる

Parameters

Name Type Description

$margin Number 中央寄せ用のマージン。

Example Usage 

+transform-middle(var(--margin-1))

Original Source code

=default-width($margin: var(--margin-2))
  --margin-inline: #{$margin}
  max-width: var(--max-width, 1580px)
  width: calc(100vw - var(--margin-inline) * 2)
  margin-inline: auto

text-outline

テキストアウトライン用スタイル (color: var(--color-dark-blue), -webkit-text-stroke: 1px $color, -webkit-text-fill-color: transparent) をターゲットにするミックスイン。

Parameters

Name Type Description

$color String テキストアウトライン用の色。

Example Usage 

+text-outline(var(--color-dark-blue))

Original Source code

=text-outline($color: var(--color-dark-blue))
  color: var(--color-cream)
  -webkit-text-stroke: 1px $color
  -webkit-text-fill-color: transparent

test-border

テストボーダー用スタイル (border: 1px solid $color) をターゲットにするミックスイン。

Parameters

Name Type Description

$color String テストボーダー用の色。

Example Usage 

+test-border(red)

Original Source code

=test-border($color: red)
  border: 1px solid $color

text-overflow

テキストオーバーフロー用スタイル (text-overflow: ellipsis, white-space: nowrap, overflow: hidden) をターゲットにするミックスイン。

Parameters

Name Type Description

$num Number テキストオーバーフロー用の数。

Example Usage 

+text-overflow(3)

Original Source code

=text-overflow($num: 1)
  text-overflow: ellipsis
  overflow: hidden
  @if $num == 1
    white-space: nowrap
  @if $num != 1
    display: -webkit-box
    -webkit-line-clamp: $num
    -webkit-box-orient: vertical
    text-overflow: ellipsis

text-inherit

font-size, font-family, font-weight, line-height, color, letter-spacing を継承するミックスイン。

Example Usage 

+text-inherit

Original Source code

=text-inherit
  font-size: inherit
  font-family: inherit
  font-weight: inherit
  line-height: inherit
  color: inherit
  letter-spacing: inherit

aspect-ratio

要素のアスペクト比を継承するミックスイン。

Parameters

Name Type Description

$width Number 要素の幅。

$height Number 要素の高さ。

$max-width Number 最大幅。

Example Usage 

+aspect-ratio(16, 9)

Original Source code

=aspect-ratio($width, $height, $max-width: none)
  position: relative
  @if ($max-width != 'none')
    max-width: $max-width + px
  &::before
    float: left
    content: ""
    padding-top: calc(($height / $width) * 100% * 100 / 100)
  &::after
    display: block
    content: ""
    clear: both
  > *
    position: absolute
    inset: 0
    width: 100%
    height: 100%
    object-fit: cover

slider-horizontal

スライダー用スタイル (gap: 20px, margin: 20px, snap: center) をターゲットにするミックスイン。

Parameters

Name Type Description

$gap Number スライダーの間隔。

$margin Number スライダーコンテナの左右の余白。

$snap String スライダーのスナップ位置。

Example Usage 

=slider-horizontal(20px, var(--margin-1), center)

Original Source code

=slider-horizontal($gap: 20px, $margin: 20px, $snap: center)
  --gap: #{$gap}
  --margin-inline: #{$margin}
  position: relative
  width: 100vw
  display: flex
  flex-wrap: nowrap
  flex-direction: row
  overflow-x: scroll
  overflow-y: hidden
  scroll-snap-type: x mandatory
  +no-scrollbar
  &::after, &::before
    content: 'a'
    opacity: 0
    min-width: var(--margin-inline)
    max-height: var(--margin-inline)
    height: 100%
    display: block
    scroll-snap-align: start
  & > *
    scroll-snap-align: $snap
    &:not(:last-child)
      margin-right: var(--gap)

fix-width

横幅を固定する

Parameters

Name Type Description

$width Number 横幅

Example Usage 

+fix-width(1000px)

Original Source code

=fix-width($width: 1000px)
  --fix-width: #{$width}
  width: var(--fix-width)
  max-width: var(--fix-width)
  min-width: var(--fix-width)

fix-height

高さを固定する

Parameters

Name Type Description

$height Number 高さ

Example Usage 

+fix-height(1000px)

Original Source code

=fix-height($height: 1000px)
  --fix-height: #{$height}
  height: var(--fix-height)
  max-height: var(--fix-height)
  min-height: var(--fix-height)

hover-el

カーソルホバーの制御

Example Usage 

+hover-el

Original Source code

=hover-el
  +pc-sm-view-over
    &:hover
      @content
  +pc-sm-view
    &[hover-el]
      @content

mouse-on

マウスが使えるデバイス用のスタイルをターゲットにするミックスイン。

Example Usage 

+mouse-on
	background-color: blue
	color: white
	&:hover
	background-color: red
	color: black

Original Source code

=mouse-on
  @media (hover: hover) and (pointer: fine)
    @content

mouse-off

マウスが使えないデバイス用のスタイルをターゲットにするミックスイン。

Example Usage 

+mouse-off
	background-color: blue
	color: white

Original Source code

=mouse-off
  @media (hover: none) and (pointer: coarse)
    @content

color-alpha

コンテンツの透明度を変更する関数

Parameters

Name Type Description

$color Color コンテンツの色

$alpha Number 透明度 (0.0 - 1.0)

Example Usage 

.text
	color: color-alpha(#fff, 0.5)
	background-color: color-alpha(var(--color-black-100), 0.5)

Original Source code

@function color-alpha($color, $alpha)
  @return color-mix(in srgb, $color $alpha*100%, transparent (1 - $alpha)*100%)

rem

Converts a given size (in pixels) to a rem value based on a base font size variable.

Parameters

Name Type Description

$size Number The size in pixels to be converted to rem units.

Example Usage 

.example
	font-size: rem(16px)

Original Source code

@function rem($size)
  $num: calc($size / 1px)
  @return calc(var(--base-fs) * $num)