CSS 변수로 커스터마이즈하기

CSS 변수로 커스터마이즈하기

Bulma는 CSS 변수(또는 CSS custom properties)를 아주 널리 사용해요. 자세한 내용은 전용 문서에서 확인할 수 있어요.

출처: 문서

본문

브라우저에서 커스터마이즈하기

개발자 콘솔을 열고 CSS 변수의 값을 바꾸는 것만으로도 현재 Bulma의 모습을 간단하게 바꿀 수 있어요.

:root 스코프에서 CSS 변수를 설정하면 Bulma의 기본 테마를 덮어쓰게 돼요. 이 작업은 Sass로도, CSS로도 할 수 있어요.

이 CSS 방식으로 직접 실험해 보려면 다음 단계를 따라 하면 돼요.

  1. 브라우저 인스펙터(개발자 도구)를 엽니다.
  2. html 요소를 선택합니다.
  3. --bulma-link-h 변수(링크 색상의 색조, hue)에 새 값을 넣습니다.
  4. 사이드 메뉴의 CSS Helpers 섹션 색이 바뀌는 것을 확인합니다.

더 알아보기 (Learn more)