レスポンシブ対応のCSSフレームワークBlumaをSCSSでカスタマイズできる環境をつくる

レスポンシブに対応したCSSフレームワークにBulmaがある。
この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 startstyle.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@importnode_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を確認してみると、いい感じで読み込めてる。 Bulmaを読み込んだHTML

最後に、style.scssでbulmaのスタイルを変更できるか確かめる。 bulmaで使われるプライマリーカラー$primary変数を指定し、ボタンの色が変わるか確かめる。

@charset "utf-8";
$primary: #FF141C;
@import "../node_modules/bulma/bulma.sass";

再度ブラウザでHTMLを確認してみると、「Primary」と書かれたボタンの色が赤色に変わっていることがわかる。

Bulmaの色を変更したHTML

Bulmaの変数は$primaryだけではなく、フォントやグリッドの幅も変更できる。

・参考リンク
https://bulma.io/documentation/customize/with-node-sass/
https://docs.npmjs.com/cli/run-script