Modular Sass로 커스터마이즈하기
Modular Sass로 커스터마이즈하기
Bulma는 단일 Sass 파일 대신 Sass 모듈의 모음으로 임포트할 수 있어요. 이렇게 하면 필요한 부분만 골라서 임포트하고, 자기만의 Sass 값으로 커스터마이즈할 수 있어요.
출처: 문서
본문
Dart Sass로 Sass를 컴파일한다면, @use와 @forward 규칙을 사용해서 Sass 모듈을 쓸 수 있어요.
라이브러리 전체를 로드하면 컴파일이 느려질 수 있어요. 그래서 속도를 유지하려면 몇 가지 권장 사항이 있어요.
사용하는 것만 임포트하기
Bulma의 기본 구조가 필요하다면 라이브러리 전체를 임포트해도 돼요. 컴포넌트 하나만 필요하다면 그 파일만 골라서 임포트하면 돼요.
이렇게 하려면 다음 순서로 진행해요.
- 자기만의 Sass 변수를 설정합니다.
bulma/sass/utilities를 임포트합니다.with키워드에 자기만의 Sass map을 넣어서 Bulma의 변수를 오버라이드합니다.- 필요하다면
bulma/sass/form폴더에도 같은 작업을 합니다. - 필요한 Bulma 컴포넌트를
@use나@forward로 임포트합니다. - 마지막으로
bulma/sass/themes에서 Bulma 테마를 임포트합니다.
// Set your brand colors
$purple: #8a4d76;
$pink: #fa7c91;
$brown: #757763;
$beige-light: #d0d1cd;
$beige-lighter: #eff0eb;
// Override global Sass variables from the /utilities folder
@use "bulma/sass/utilities" with (
$family-primary: '"Nunito", sans-serif',
$grey-dark: $brown,
$grey-light: $beige-light,
$primary: $purple,
$link: $pink,
$control-border-width: 2px
);
// Override Sass variables from the /form folder
@use "bulma/sass/form" with (
$input-shadow: none
);
// Import the components you need
@forward "bulma/sass/base";
@forward "bulma/sass/components/card";
@forward "bulma/sass/components/modal";
@forward "bulma/sass/components/navbar";
@forward "bulma/sass/elements/button";
@forward "bulma/sass/elements/icon";
@forward "bulma/sass/elements/content";
@forward "bulma/sass/elements/notification";
@forward "bulma/sass/elements/progress";
@forward "bulma/sass/elements/tag";
@forward "bulma/sass/layout/footer";
// Import the themes so that all CSS variables have a value
@forward "bulma/sass/themes";
// Import the Google Font
@import url("https://fonts.googleapis.com/css?family=Nunito:400,700");
이렇게 하면 Bulma의 다음 값들을 오버라이드할 수 있어요.
utilities폴더의 전역 변수form폴더의 폼 변수
컴포넌트를 임포트하면서 함께 커스터마이즈하고 싶다면, 임포트할 때 같은 방식으로 처리하면 돼요.
@use "bulma/sass/elements/image" with (
$dimensions: 20 40 80 160,
);