CSS Variables in Bulma

CSS Variables in Bulma (Bulma의 CSS 변수)

Bulma의 모든 컴포넌트는 CSS Variables(또는 CSS custom properties)로 스타일링돼요. 이 문서에서는 CSS 변수의 스코프와 접두사, 테마의 관계를 다뤄요.

출처: 문서

본문

Bulma 컴포넌트들은 모두 CSS Variables(CSS custom properties라고도 불러요)로 스타일링돼요. 이에 대한 자세한 내용은 MDN Reference에서 확인할 수 있어요.

예를 들어 .title 요소는 이렇게 스타일링돼요.

.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);
}

스코프 (Scope)

Bulma CSS 변수는 다음 두 곳 중 한 곳에서 정의돼요.

전역 스코프인 :root
컴포넌트 스코프, 예를 들어 .button

더 구체적인 스코프(예: .button)에서 정의한 CSS 변수는 더 전역적인 스코프에서 정의한 값을 덮어써요.

:root {
  /* Default global value */
  --bulma-size-medium: 1.25rem;
}

.button {
  /* Overrides the global value */
  --bulma-size-medium: 1.5rem;
}

접두사 (Prefix)

모든 Bulma CSS 변수는 bulma-(대시 포함) 접두사로 시작해요. 웹페이지를 인스펙트하면 이를 확인할 수 있어요.

이 접두사는 $cssvars-prefix Sass 변수를 설정해서 바꿀 수 있어요.

@use "bulma/sass" with (
  $cssvars-prefix: "my-prefix-"
);

테마 (Themes)

:root 레벨에서 정의된 전역 CSS 변수가 바로 Bulma 테마를 정의해요. 테마는 단순히 CSS 변수의 모음이라고 생각하면 돼요.

CSS Variables in Bulma