Bulma Sass 변수 목록

Bulma Sass 변수 목록 (List of Bulma Sass variables)

이 페이지에서는 Bulma가 사용하는 모든 Sass 변수의 목록과 기본값을 정리해 드릴게요. 색상, 타이포그래피, 크기, 브레이크포인트, 반경 등 프레임워크의 모든 기본값을 Sass 변수로 직접 확인하고 커스터마이징할 수 있습니다.

출처: 문서

본문

초기 변수 (Initial variables)

utilities/initial-variables.scss에 정의되어 있습니다.

그레이 스케일 (Greyscale):

색상 (Colors):

타이포그래피 (Typography):

기타 (Other):

$aspect-ratios와 $breakpoints는 Sass 맵으로 정의됩니다:

$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)
);

$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,
  ),
);

파생 변수 (Derived variables)

utilities/derived-variables.scss에 정의되어 있습니다. 위의 초기 변수들을 조합해 만들어집니다.

$colors 맵은 mergeColorMaps 함수로 초기 변수와 커스텀 색상을 병합해 만듭니다:

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

컴포넌트 변수 (Component variables)

각 Bulma 컴포넌트의 Sass 변수 목록은 해당 컴포넌트 페이지 하단에 정리되어 있습니다.

더 알아보기 (Learn more)

• 커스터마이징 개념 (Concepts)
• Sass로 커스터마이징 (With Sass)