Sass로 커스터마이즈하기

Sass로 커스터마이즈하기

Bulma는 Sass로 만들어졌어요. 색상, 크기, 간격, 그리고 프레임워크의 다른 측면들을 정의할 때 Sass 변수를 사용해요. 이 문서에서는 Sass를 이용해 Bulma를 직접 커스터마이즈하는 전체 흐름을 살펴볼게요.

출처: 문서

본문

의존성 설치하기

Sass로 Bulma를 커스터마이즈하려면 먼저 Sass를 설치해야 해요. 가장 권장하는 방법은 sass npm 패키지를 사용하는 거예요.

npm install sass
npm install bulma

package.json에 Bulma를 빌드하는 스크립트 하나와, 빌드 후 변경을 감지하는 스크립트 하나를 추가해요.

"build-bulma": "sass --load-path=node_modules my-bulma-project.scss my-bulma-project.css",
"start": "npm run build-bulma -- --watch"

전체 package.json은 이렇게 보이면 돼요.

{
"dependencies": {
"bulma": "^1.0.0",
"sass": "^1.72.0"
},
"scripts": {
"build-bulma": "sass --load-path=node_modules my-bulma-project.scss my-bulma-project.css",
"start": "npm run build-bulma -- --watch"
}
}

Sass 파일 만들기

package.json 옆에 my-bulma-project.scss 파일을 만들어요.

Bulma의 Sass 변수를 자기만의 값으로 덮어쓰려면, Sass map을 받는 @use와 with 키워드를 사용하면 돼요.

// Set your brand colors
$purple: #8a4d76;
$pink: #fa7c91;
$brown: #757763;
$beige-light: #d0d1cd;
$beige-lighter: #eff0eb;

// Path to Bulma's sass folder
@use "bulma/sass" with (
$family-primary: '"Nunito", sans-serif',
$grey-dark: $brown,
$grey-light: $beige-light,
$primary: $purple,
$link: $pink,
$control-border-width: 2px,
$input-shadow: none
);

// Import the Google Font
@import url("https://fonts.googleapis.com/css?family=Nunito:400,700");

다음 명령어를 실행해서 설정이 잘 됐는지 확인해요.

npm run build-bulma

그러면 다른 파일들 옆에 두 개의 파일이 생기는 것을 볼 수 있어요.

  • my-bulma-project.css — CSS 출력 파일
  • my-bulma-project.css.map — 선택적인 소스 맵

HTML 페이지 추가하기

Bulma 프로젝트가 실제로 동작하는 모습을 보려면, 다음 내용으로 index.html 페이지를 만들어요.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Hello Bulma!</title>
<link rel="stylesheet" href="my-bulma-project.css">
</head>
<body>
<section class="section">
<div class="container">
<h1 class="title">Bulma</h1>
<p class="subtitle">
Modern CSS framework based on
<a
href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox"
>Flexbox</a
>
</p>
<div class="field">
<div class="control">
<input class="input" type="text" placeholder="Input">
</div>
</div>
<div class="field">
<p class="control">
<span class="select">
<select>
<option>Select dropdown</option>
</select>
</span>
</p>
</div>
<div class="buttons">
<a class="button is-primary">Primary</a>
<a class="button is-link">Link</a>
</div>
</div>
</section>
</body>
</html>

최종 결과물

프로젝트 폴더는 이렇게 구성되어 있으면 돼요.

  • index.html
  • my-bulma-project.css
  • my-bulma-project.css.map
  • my-bulma-project.scss
  • package.json

그리고 최종 페이지는 위의 HTML로 만든 Bulma 페이지처럼 보여요.

더 알아보기 (Learn more)