# レスポンシブ対応のCSSフレームワークBulmaをSCSSでカスタマイズできる環境をつくる
レスポンシブに対応したCSSフレームワークにBulma (opens new window)がある。
このBulmaのフォントや色(プライマリーからやアクセントカラーなど)、グリッド幅をSCSSでカスタマイズできる環境を構築していく。
まずはSCSSをコンパイルできる環境を構築し、次にBulmaをSCSSでカスタマイズできるようにしていく。
# node-sassでSCSSファイルをコンパイルできるようにする
SCSSファイルをコンパイルできるようにするため、node-sassをインストールする。
npm install -D node-sass
package.json
{
"devDependencies": {
"node-sass": "^4.11.0"
}
}
インストールしたnode-sassが動くことを確認しておく。
scssディレクトリにscssファイルを作成し、cssディレクトリにコンパイルされたcssファイルを出力できるようにディレクトリとファイルを用意する。
ディレクトリ
.
├── css
├── package-lock.json
├── package.json
└── scss
└── style.scss
style.scssで変数を使ってみてコンパイルされるのを確認する。
$primary-colorという変数を使って、bodyの背景色を指定する。
$primary-color: #FF141C;
body {
background-color: $primary-color;
}
node-sassを実行することによりSCSSからCSSを出力する。
node-sass 入力元のSCSSファイル 出力先のCSSファイルという形でコンパイルすることができる。
npx node-sass scss/style.scss css/style.css
出力されたstyle.cssを確認すると、変数が展開され#FF141Cが設定されている。
これでSCSSのコンパイルが確認できた。
body {
background-color: #FF141C; }
# SCSSのコンパイルを自動化する
毎回npx node-sass scss/style.scss css/style.cssとコマンドを打つのは手間なので、
SCSSを自動でコンパイルできるようにする。
npm-scriptsでSCSSファイルを--watchオプションにより監視する。
css-watchscriptの最後に指定している--watchの前に書かれている--は、css-buildscriptを実行する際のオプションを提供している。
つまり、css-watchscriptを実行するとnode-sass scss/style.scss css/style.csc --watchが実行されることになる。
"scripts": {
"css-build": "node-sass scss/style.scss css/style.css",
"css-watch": "npm run css-build -- --watch",
"start": "npm run css-watch"
}
npm run css-buildを実行すると、node-sassコマンドを打っていたのと同じようにstyle.cssが出力される。そして、npm startでstyle.scssが変更されるたびに自動でstyle.cssが生成されるようになる。
# bulmaをSCSSでカスタマイズできるようにする
bulmaをインストールする。
npm install -D bulma
package.json
{
"devDependencies": {
"bulma": "^0.7.4",
"node-sass": "^4.11.0"
}
}
bulmaを読み込むため、style.scssに@importでnode_modulesディレクトリ下にあるbulma.sassを指定する。
@charset "utf-8";
@import "../node_modules/bulma/bulma.sass";
そして、index.htmlを作成してstyle.cssを読み込む。
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>My custom Bulma website</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<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>
</body>
</html>
ブラウザでHTMLを確認してみると、いい感じで読み込めてる。
最後に、style.scssでbulmaのスタイルを変更できるか確かめる。
bulmaで使われるプライマリーカラー$primary変数を指定し、ボタンの色が変わるか確かめる。
@charset "utf-8";
$primary: #FF141C;
@import "../node_modules/bulma/bulma.sass";
再度ブラウザでHTMLを確認してみると、「Primary」と書かれたボタンの色が赤色に変わっていることがわかる。
Bulmaの変数は$primaryだけではなく、フォントやグリッドの幅も変更できる。
・参考リンク
https://bulma.io/documentation/customize/with-node-sass/ (opens new window)
https://docs.npmjs.com/cli/run-script (opens new window)