Bulma Sass 変数一覧

Bulma によって定義されたすべてのSass変数

初期変数 #

utilities/initial-variables.scss で定義されています。

Sass 変数	値
`$black`	`hsl(221, 14%, 4%)`
`$black-bis`	`hsl(221, 14%, 9%)`
`$black-ter`	`hsl(221, 14%, 14%)`
`$grey-darker`	`hsl(221, 14%, 21%)`
`$grey-dark`	`hsl(221, 14%, 29%)`
`$grey`	`hsl(221, 14%, 48%)`
`$grey-light`	`hsl(221, 14%, 71%)`
`$grey-lighter`	`hsl(221, 14%, 86%)`
`$grey-lightest`	`hsl(221, 14%, 93%)`
`$white-ter`	`hsl(221, 14%, 96%)`
`$white-bis`	`hsl(221, 14%, 98%)`
`$white`	`hsl(221, 14%, 100%)`
`$orange`	`hsl(14, 100%, 53%)`
`$yellow`	`hsl(42, 100%, 53%)`
`$green`	`hsl(153, 53%, 53%)`
`$turquoise`	`hsl(171, 100%, 41%)`
`$cyan`	`hsl(198, 100%, 70%)`
`$blue`	`hsl(233, 100%, 63%)`
`$purple`	`hsl(271, 100%, 71%)`
`$red`	`hsl(348, 100%, 70%)`
`$family-sans-serif`	`"Inter", "SF Pro", "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Helvetica Neue", "Helvetica", "Arial", sans-serif`
`$family-monospace`	`"Inconsolata", "Hack", "SF Mono", "Roboto Mono", "Source Code Pro", "Ubuntu Mono", monospace`
`$render-mode`	`optimizeLegibility`
`$size-1`	`3rem`
`$size-2`	`2.5rem`
`$size-3`	`2rem`
`$size-4`	`1.5rem`
`$size-5`	`1.25rem`
`$size-6`	`1rem`
`$size-7`	`0.75rem`
`$weight-light`	`300`
`$weight-normal`	`400`
`$weight-medium`	`500`
`$weight-semibold`	`600`
`$weight-bold`	`700`
`$weight-extrabold`	`800`
`$block-spacing`	`1.5rem`
`$aspect-ratios`	`( (1, 1), (5, 4), (4, 3), (3, 2), (5, 3), (16, 9), (2, 1), (3, 1), (4, 5), (3, 4), (2, 3), (3, 5), (9, 16), (1, 2), (1, 3) )`
`$gap`	`32px`
`$tablet`	`769px`
`$desktop`	`960px + 2 * $gap`
`$widescreen`	`1152px + 2 * $gap`
`$widescreen-enabled`	`true`
`$fullhd`	`1344px + 2 * $gap`
`$fullhd-enabled`	`true`
`$breakpoints`	`( "mobile": ( "until": $tablet, ), "tablet": ( "from": $tablet, ), "tablet-only": ( "from": $tablet, "until": $desktop, ), "touch": ( "from": $desktop, ), "desktop": ( "from": $desktop, ), "desktop-only": ( "from": $desktop, "until": $widescreen, ), "until-widescreen": ( "until": $widescreen, ), "widescreen": ( "from": $widescreen, ), "widescreen-only": ( "from": $widescreen, "until": $fullhd, ), "until-fullhd": ( "until": $fullhd, ), "fullhd": ( "from": $fullhd, ), )`
`$easing`	`ease-out`
`$radius-small`	`0.25rem`
`$radius`	`0.375rem`
`$radius-medium`	`0.5em`
`$radius-large`	`0.75rem`
`$radius-rounded`	`9999px`
`$speed`	`86ms`
`$variable-columns`	`true`
`$rtl`	`false`
`$class-prefix`	`""`
`$cssvars-prefix`	`"bulma-"`
`$helpers-prefix`	`"is-"`
`$helpers-has-prefix`	`"has-"`

派生変数 #

utilities/derived-variables.scss で定義されています。

Sass 変数	値
`$scheme-main`	`iv.$white`
`$scheme-main-bis`	`iv.$white-bis`
`$scheme-main-ter`	`iv.$white-ter`
`$scheme-invert`	`iv.$black`
`$scheme-invert-bis`	`iv.$black-bis`
`$scheme-invert-ter`	`iv.$black-ter`
`$text`	`iv.$grey-dark`
`$text-invert`	`fn.bulmaFindColorInvert($text)`
`$text-weak`	`iv.$grey`
`$text-strong`	`iv.$grey-darker`
`$primary`	`iv.$turquoise`
`$info`	`iv.$cyan`
`$success`	`iv.$green`
`$warning`	`iv.$yellow`
`$danger`	`iv.$red`
`$light`	`iv.$white-ter`
`$dark`	`iv.$grey-darker`
`$link`	`iv.$blue`
`$background`	`iv.$white-ter`
`$border`	`iv.$grey-lighter`
`$border-weak`	`iv.$grey-lightest`
`$code`	`iv.$red`
`$code-background`	`$background`
`$pre`	`$text`
`$pre-background`	`$background`
`$family-primary`	`iv.$family-sans-serif`
`$family-secondary`	`iv.$family-sans-serif`
`$family-code`	`iv.$family-monospace`
`$size-small`	`iv.$size-7`
`$size-normal`	`iv.$size-6`
`$size-medium`	`iv.$size-5`
`$size-large`	`iv.$size-4`
`$shadow-color`	`iv.$black`
`$custom-colors`	`null`
`$custom-shades`	`null`
`$colors`	`fn.mergeColorMaps( ( "white": ( iv.$white, iv.$black, ), "black": ( iv.$black, iv.$white, ), "light": ( $light, $dark, ), "dark": ( $dark, $light, ), "text": $text, "primary": $primary, "link": $link, "info": $info, "success": $success, "warning": $warning, "danger": $danger, ), $custom-colors )`
`$shades`	`fn.mergeColorMaps( ( "black-bis": iv.$black-bis, "black-ter": iv.$black-ter, "grey-darker": iv.$grey-darker, "grey-dark": iv.$grey-dark, "grey": iv.$grey, "grey-light": iv.$grey-light, "grey-lighter": iv.$grey-lighter, "white-ter": iv.$white-ter, "white-bis": iv.$white-bis, ), $custom-shades )`
`$sizes`	`iv.$size-1 iv.$size-2 iv.$size-3 iv.$size-4 iv.$size-5 iv.$size-6 iv.$size-7`

コンポーネント変数 #

各 Bulma コンポーネントについて、Sass 変数のリストはそのページの一番下に記載されています。

ここから始めましょう

機能

Sass ツール

カスタマイズ

CSS ライブラリ

CSS ヘルパー

スポンサー

Bulma Sass 変数一覧

Bulma によって定義されたすべてのSass変数

初期変数 #

派生変数 #

コンポーネント変数 #

Bulma のサポート方法