Bulma 모듈화
Bulma 모듈화 (Modularity in Bulma)
Bulma는 수십 개의 .scss 파일로 나뉘어 있어서 필요한 컴포넌트만 골라 불러올 수 있어요. @use 키워드로 모듈을 로드하는 방법을 하나씩 알아볼게요.
출처: 문서
본문
Bulma는 수십 개의 .scss 파일로 정의된 **요소(element)**와 **컴포넌트(component)**로 구성되어 있어요. @use 키워드로 각 파일을 개별적으로 로드할 수 있습니다.
@use "path/to/file.scss";
이렇게 하면 대상 파일의 스타일은 정상적으로 로드되지만, 대부분의 Bulma 컴포넌트는 기본 테마가 정의한 베이스 스타일과 CSS 변수에 의존해요. 그래서 sass/base 폴더와 sass/themes 폴더도 함께 로드하는 것이 좋습니다.
// Bulma의 베이스 스타일과 테마를 로드 (minireset 포함)
@use "bulma/sass/base";
@use "bulma/sass/themes";
// 다른 Bulma 컴포넌트 로드
@use "bulma/sass/elements/button";
@use "bulma/sass/components/message";
columns 불러오기 (Importing columns)
Bulma의 columns 같은 레이아웃 기능은 Bulma 테마가 정의한 CSS 변수에 의존하지 않아요. 그래서 추가 파일 없이 바로 로드할 수 있습니다. 예를 들어 Bulma columns만 불러오려면 bulma/sass/grid 폴더에 있는 파일을 로드하면 돼요. columns.scss 파일을 @use 키워드로 로드하기만 하면 됩니다.
// columns만 로드
@use "bulma/sass/grid/columns";
이제 컨테이너용 .columns 클래스와 .column 클래스를 바로 사용할 수 있어요.
<div class="columns">
<div class="column">1</div>
<div class="column">2</div>
<div class="column">3</div>
<div class="column">4</div>
<div class="column">5</div>
</div>
Bulma 요소와 컴포넌트 불러오기 (Importing Bulma elements and components)
.button 같은 요소와 .message 같은 컴포넌트를 로드할 때는 베이스 스타일과 기본 테마도 함께 로드하는 것이 좋습니다.
// Bulma의 베이스 스타일과 테마를 로드 (minireset 포함)
@use "bulma/sass/base";
@use "bulma/sass/themes";
// button과 title 요소, 컴포넌트 로드
@use "bulma/sass/elements/button";
@use "bulma/sass/elements/title";
@use "bulma/sass/components/message";
이제 .button 클래스와 모든 수식어를 사용할 수 있어요.
.is-active.is-primary,.is-info,.is-success....is-small,.is-medium,.is-large.is-outlined,.is-inverted,.is-link.is-loading,[disabled]
<button class="button">Button</button>
<button class="button is-primary">Primary button</button>
<button class="button is-large">Large button</button>
<button class="button is-loading">Loading button</button>
커스텀 Sass 변수로 불러오기 (Importing with custom Sass variables)
대부분의 Bulma 컴포넌트는 Sass 변수로 설정을 구성해요. 예를 들어 .section 레이아웃 컴포넌트는 padding을 정의하기 위해 4개의 변수를 사용합니다.
$section-padding: 3rem 1.5rem !default;
$section-padding-desktop: 3rem 3rem !default;
$section-padding-medium: 9rem 4.5rem !default;
$section-padding-large: 18rem 6rem !default;
@use 키워드를 사용하면 모듈을 로드할 때 자신만의 변수로 설정할 수 있어요.
// 커스텀 변수로 section 컴포넌트 로드
@use "bulma/sass/layout/section" with (
$section-padding: 3rem,
$section-padding-desktop: 4.5rem
);