불마 커스터마이징 개념

불마 커스터마이징 개념 (Bulma Customization Concepts)

Bulma는 커스터마이징이 매우 쉬운 CSS 프레임워크입니다. 색상부터 타이포그래피, 간격과 크기, 폼과 레이아웃까지 Bulma의 모든 부분을 사용자가 커스터마이징할 수 있어요. Bulma의 스타일과 변수는 여러 레벨에서 정의됩니다:

• 전역 Sass 변수 (Global Sass variables)
• 컴포넌트 Sass 변수 (Component Sass variables)
• 전역 CSS 변수 (Global CSS variables)
• 컴포넌트 CSS 변수 (Component CSS variables)
• 헬퍼 클래스 (Helper classes)

출처: 문서

본문

모든 Bulma 컴포넌트는 Sass 변수와 CSS 변수(커스텀 프로퍼티라고도 불려요)로 스타일링됩니다. 이에 대해 더 자세히 알고 싶다면 Sass 웹사이트와 MDN Reference에서 확인할 수 있어요.

전역 Sass 변수 (Global Sass Variables)

Bulma는 utilities 폴더에 있는 2개의 파일에서 전역 Sass 변수를 정의합니다:

initial-variables.scss — 리터럴 값으로 정의하는 변수들:

• $blue: hsl(229, 53%, 53%) 같은 색상
• $size-1: 3rem 같은 글꼴 크기
• $block-spacing: 1.5rem 같은 치수
• $tablet: 769px 같은 브레이크포인트
• $easing: ease-out 또는 $radius-large: 0.75rem 같은 기타 값

derived-variables.scss — 이전 파일에서 설정한 값으로부터 계산되는 변수들:

• primary 색상: $primary, $link, $success, $info, $warning, $dark
• utility 색상: $background, $border, $code와 $pre, $shadow-color
• 타이포그래피: $family-primary, $family-secondary, $family-code, $size-small, $size-normal, $size-medium, $size-large
• 색상 맵: $colors, $shades, $sizes

컴포넌트 Sass 변수 (Component Sass variables)

모든 Bulma 컴포넌트는 고유한 Sass 변수를 정의합니다. 예를 들어 components/breadcrumb.scss는 다음과 같은 변수를 정의합니다:

전역 CSS 변수 (Global CSS Variables)

Bulma는 :root 레벨에서 정의되는 전역 CSS 변수를 사용합니다. 모두 bulma- 접두사로 시작해요:

:root {
  /* Colors and Lightness values */
  --bulma-scheme-h: 221;
  --bulma-scheme-s: 14%;
  --bulma-light-l: 90%;
  --bulma-light-invert-l: 20%;
  --bulma-dark-l: 20%;
  --bulma-dark-invert-l: 90%;
  --bulma-soft-l: 90%;
  --bulma-bold-l: 20%;
  --bulma-soft-invert-l: 20%;
  --bulma-bold-invert-l: 90%;
  /* etc. */

  /* Color Palettes */
  --bulma-primary: hsla(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-l), 1);
  --bulma-primary-base: hsla(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-l), 1);
  --bulma-primary-rgb: 0, 209, 178;
  --bulma-primary-h: 171deg;
  --bulma-primary-s: 100%;
  --bulma-primary-l: 41%;
  --bulma-primary-00-l: 1%;
  --bulma-primary-05-l: 6%;
  --bulma-primary-10-l: 11%;
  --bulma-primary-15-l: 16%;
  --bulma-primary-20-l: 21%;
  /* etc. */

  /* Typography */
  --bulma-family-primary: Inter, SF Pro, Segoe UI, Roboto, Oxygen, Ubuntu, Helvetica Neue, Helvetica, Arial, sans-serif;
  --bulma-family-secondary: Inter, SF Pro, Segoe UI, Roboto, Oxygen, Ubuntu, Helvetica Neue, Helvetica, Arial, sans-serif;
  --bulma-family-code: Inconsolata, Hack, SF Mono, Roboto Mono, Source Code Pro, Ubuntu Mono, monospace;
  --bulma-size-small: 0.75rem;
  --bulma-size-normal: 1rem;
  --bulma-size-medium: 1.25rem;
  --bulma-size-large: 1.5rem;
  /* etc. */
}

같은 스코프(또는 더 구체적인 스코프)에서 새 값을 설정하면 간단히 덮어쓸 수 있어요:

:root {
  /* Set new values */
  --bulma-scheme-h: 35;
  --bulma-scheme-s: 20%;
}

컴포넌트 CSS 변수 (Components CSS Variables)

Bulma는 컴포넌트 레벨에서도 스타일링됩니다. 예를 들어 .title 요소가 이렇게 스타일링됩니다:

.title {
  --bulma-title-color: var(--bulma-text-strong);
  --bulma-title-family: false;
  --bulma-title-size: var(--bulma-size-3);
  --bulma-title-weight: var(--bulma-weight-extrabold);
  --bulma-title-line-height: 1.125;
  --bulma-title-strong-color: inherit;
  --bulma-title-strong-weight: inherit;
  --bulma-title-sub-size: 0.75em;
  --bulma-title-sup-size: 0.75em;
}

.title {
  color: var(--bulma-title-color);
  font-size: var(--bulma-title-size);
  font-weight: var(--bulma-title-weight);
  line-height: var(--bulma-title-line-height);
}

같은 스코프 아래에서 새 값을 설정하면 간단히 덮어쓸 수 있습니다:

.title {
  --bulma-title-color: #fff;
  --bulma-title-line-height: 1.6;
}

더 알아보기 (Learn more)

• Sass로 커스터마이징 (With Sass)
• Sass 변수 목록 (List of Sass variables)