環境
- Windows 10 Pro
- Node.js v11.15.0
- Bulma 0.7.4
- node-sass 4.12.0
カスタマイズの基本について理解する
With node-sassの手順1~5までは特筆することはありません。
そのままやっていきます。
問題は6. Add your own Bulma stylesです。
ここがカスタマイズを行う手順なのですが、3. Create a Sass fileのSass fileと6. Add your own Bulma stylesのSass fileが全く違うため、真面目に読解する必要があります。
以下に6. Add your own Bulma stylesのSass fileを引用します。
"utf-8";
// Import a Google Font
url('https://fonts.googleapis.com/css?family=Nunito:400,700');
// Set your brand colors
$purple: #8A4D76;
$pink: #FA7C91;
$brown: #757763;
$beige-light: #D0D1CD;
$beige-lighter: #EFF0EB;
// Update Bulma's global variables
$family-sans-serif: "Nunito", sans-serif;
$grey-dark: $brown;
$grey-light: $beige-light;
$primary: $purple;
$link: $pink;
$widescreen-enabled: false;
$fullhd-enabled: false;
// Update some of Bulma's component variables
$body-background-color: $beige-lighter;
$control-border-width: 2px;
$input-border-color: transparent;
$input-shadow: none;
// Import only what you need from Bulma
"../node_modules/bulma/sass/utilities/_all.sass";
"../node_modules/bulma/sass/base/_all.sass";
"../node_modules/bulma/sass/elements/button.sass";
"../node_modules/bulma/sass/elements/container.sass";
"../node_modules/bulma/sass/elements/form.sass";
"../node_modules/bulma/sass/elements/title.sass";
"../node_modules/bulma/sass/components/navbar.sass";
"../node_modules/bulma/sass/layout/hero.sass";
"../node_modules/bulma/sass/layout/section.sass";
以下のカスタマイズをしているため、3. Create a Sass fileと比べて6. Add your own Bulma stylesのSass fileは長くなってます。
- Variablesで解説されている変数の定義(Sass fileのコメントの"Set your brand colors, Update Bulma's global variables", "Update some of Bulma's component variables"の部分)
(ちなみにコメントの"Import a Google Font"の部分は、Nunitoフォントを使うための布石)
- Bulmaに含まれるCSSのうち使う部分だけの取り込み(Sass fileのコメントの"Import only what you need from Bulma"の部分)
Variablesで解説されている変数の定義だけしたい場合
@import で"../node_modules/bulma/bulma.sass"を読み込むSass fileにすればOKです。
以下に例を示します。
"utf-8";
$family-sans-serif: Helvetica, "Arial", "Hiragino Kaku Gothic ProN",'ヒラギノ角ゴ ProN W3', Meiryo, "メイリオ", sans-serif;
"../node_modules/bulma/bulma.sass";
' `import "../node_modules/bulma/bulma.sass"; 'を、変数の定義より後に記載するのが注意点です。
Sassの仕様上はあたりまえなのですが、私は知らなくてハマってました。
さいごに
これで、あとはVariablesのページを理解すれば、カスタマイズが可能になりました。
私はまだ理解していませんが、そんなに数多くないしどうにかカスタマイズできるようになる…、かな?