メタ言語の続きです。前回はBEMによるclass名をSass(SCSS)とEJSに書いてみました。今回からはモジュール設計に入ります。まずはBEMのB(ブロック)ごとにSass(SCSS)ファイルを分割してみます。@import
を使います。それでは行きましょう!
【目次】
- BEMによるCSS設計
- common.css(ファイル分割前)
- other.cssの内容を.mainに反映
- @importでパーシャルファイルをインポート
- パーシャルを修正してもコンパイルに反映されない!
- ブログっぽいCSSに改造
- おまけ:@importは将来的になくなる!?
- 最後に
※参考:【メタ言語】BEMによるclass名をSass(SCSS)とEJSで書いてみる(モジュール事始め) - クモのようにコツコツと
※メタ言語(HTMLテンプレートエンジン、AltCSS、AltJS)まとめ
qiita.com
BEMによるCSS設計
BEMによるCSS設計、こちらのスライドがわかりやすくて参考になる!
Sass(SCSS)ファイルはブロックごとにファイルを分けるのがセオリーのようだが、その理由はブロックがファイル名になることによって、ブロックの重複が防げると!ファインダーのファイル一覧がブロック一覧わけだ!
そのほかにも参考になる記事がたくさん。少しずつ理解して進めて行きたく。
※参考:BEMをSassで快適に書く方法 | maesblog
※参考:一番詳しいCSS設計規則BEMのマニュアル - Qiita
※参考:SCSSのファイル設計について Vol.1 | 吉本式BEM設計(BEM設計ベース)
※参考:SCSSのファイル設計について Vol.2 | 吉本式BEM設計(BEM設計ベース)
※参考:SCSSのファイル設計(BEM設計からFLOCSS設計に) | 吉本式 Web制作のコーディングガイドライン
まずはブロックごとのファイル分割から取り組む!
common.css(ファイル分割前)
前回、こんな感じでBEM構成を作った。
common.scss
.main__lede { font-size: 0.8em; } .inner { background: #fff; padding: 20px; margin: 0 0 20px; &__title { color: purple; font-size: 1.5em; line-height: 1.2; } &__text { &-em { font-weight: bold; color: brown; } &-bikou { font-size: 0.8em; &:before { content: "※"; } } &-btn { background: brown; color: #fff; padding: 10px; } }
詳細は前回記事参照
※参考:【メタ言語】BEMによるclass名をSass(SCSS)とEJSで書いてみる(モジュール事始め) - クモのようにコツコツと
other.cssの内容を.mainに反映
ファイル名を「common.scss」を「style.scss」に変更した。最終的に書き出されるファイルは一つなので「共通」よりも「スタイル全体」みたいな意味がいいかなと思い。
Sass(SCSS)コンパイルの時にh1タグだけ「other.scss」に書いた。
#scss h1 { color: red; font-size: 2em; }
※参考:【Gulp】watch()メソッドでSass(SCSS)を自動コンパイル - クモのようにコツコツと
その内容を.main
ブロックに統合する。
.main { &__title { color: red; font-size: 2em; } &__lede { font-size: 0.8em; } } .inner { // 中略 }
.main
の中に&
でネスト(入れ子)にした。
@importでパーシャルファイルをインポート
_main.scss作成
ファイル名にアンダースコア_
を付けるとSassのコンパイルから除外される。これを「パーシャル」ファイルという。
ブロック関係は「block」というフォルダを作ってその中に入れることにする。まずは「_main.scss」を作る。
block/_main.scss
.main { &__title { color: red; font-size: 2em; } &__lede { font-size: 0.8em; } }
_inner.scss作成
次に「_inner.scss」を作る。
block/_inner.scss
.inner { background: #fff; padding: 20px; margin: 0 0 20px; &__title { color: purple; font-size: 1.5em; line-height: 1.2; } &__text { &-em { font-weight: bold; color: brown; } &-bikou { font-size: 0.8em; &:before { content: "※"; } } &-btn { background: brown; color: #fff; padding: 10px; } } }
@importでstyle.scssにインポート
で、これを親階層の「style.scss」に@import
でインポートする。
style.scss
@import 'block/_main'; @import 'block/_inner';
ほとんど内容が無いようw
この状態でgulpを起動してみると…
npx gulp
お、ブラウザが立ち上がった。
スタイルもちゃんと当たっている!
コンパイルされたstyle.css
こうなった!
@charset "UTF-8"; .main__title { color: red; font-size: 2em; } .main__lede { font-size: 0.8em; } .inner { background: #fff; padding: 20px; margin: 0 0 20px; } .inner__title { color: purple; font-size: 1.5em; line-height: 1.2; } .inner__text-em { font-weight: bold; color: brown; } .inner__text-bikou { font-size: 0.8em; } .inner__text-bikou:before { content: "※"; } .inner__text-btn { background: brown; color: #fff; padding: 10px; }
@importで書いた順番にコンパイルされている!
パーシャルを修正してもコンパイルに反映されない!
下層の全ディレクトリを扱う(/**)
しかしこのままでは問題があった…。
gulpを起動した直後はパーシャルファイルをインポートしてコンパイルされるのだが、その後にパーシャルを修正しても、うんともすんとも言わない。
こちらの記事が参考になった!
特定のディレクトリ直下にある全てのファイルとディレクトリを扱いたい場合は、アスタリスク2つとスラッシュ、その後ろにアスタリスク1つをつけて指定します。
ディレクトリ名
/**/*.scss
※参考:Gulpで複数ディレクトリのSCSSを自動コンパイルする方法! | Youki Takemoto's Blog
この書き方はSass(SCSS)に限らずワイルドカードの一般的な書き方のようだ。知らなかった!
gulpfile.jsを修正
「gulpfile.js」の中のSass(SCSS)関係のパスを書き換える。
Sassコンパイル部分
// sassコンパイル gulp.task('sass', (done) => { gulp.src('./src/scss/**/*.scss') .pipe(sass({ outputStyle: 'expanded' }) ) .on("error", sass.logError) .pipe(gulp.dest('./dest/css')); done(); });
watch部分
// 監視ファイル gulp.task('watch-files', (done) => { // 中略 gulp.watch("./src/scss/**/*.scss", gulp.task('sass')); gulp.watch("./dest/css/*.css", gulp.task('browser-reload')); // 中略 done(); });
実はここに至るまで色々エラーが出たり、再インストール、プラグインなど試行錯誤した。最終的には上記のコードで解決できた!
gulp再起動
gulpfile.jsの変更はNodeサーバを再起動しないと反映されないので一旦「Control + C」で閉じる。
gulp起動!
npx gulp
これでパーシャルファイルを修正した時もリアルタイムでブラウザが自動リロードされる!
ブログっぽいCSSに改造
ということでこの状態でSass(SCSS)のスタイルを改造してみた。
当ブログっぽいデザインにしてみた!
「_bass.scss」を作成
まず、「base」というフォルダを作って、中に「_base.scss」を作成。
base/_base.scss
body { margin: 0; padding: 0; font-family: sans-serif; color: #333; a { color: #C30D23; } }
ここにはbodyタグなど全体に共通するスタイルを入れてみた。aタグに当ブログと同じアクセントカラー。
「style.scss」で「_base.scss」をインポート
それをstyle.scssにインポートする。
/***** base *****/ @import 'base/_base'; /***** block *****/ @import 'block/_main'; @import 'block/_inner';
境目がわかりやすいようにコメントも追加した。
「_main.scss」を修正
「_main.scss」の内容
/* main */ .main { width: 960px; margin: 0 auto; &__title { color: #333; font-size: 2em; } &__lede { font-size: 1em; } }
タイトルの背景を薄いグレーにし、左線にアクセントカラー。
「_inner.scss」を修正
「_inner.scss」の内容
/* inner */ .inner { margin: 0 0 40px; &__title { padding: 10px; background: #eee; border-left: 2px solid #C30D23; font-size: 1.5em; line-height: 1.2; } &__text { &-em { font-weight: bold; background: #eee; padding: 5px; color: #C30D23; } &-bikou { font-size: 0.8em; &:before { content: "※"; } } &-btn { background: #C30D23; color: #fff; padding: 10px; } } }
em
とボタンにアクセントカラーを入れてみた。
コンパイルされた「style.css」
意図通りにコンパイルされた!
@charset "UTF-8"; /***** base *****/ body { margin: 0; padding: 0; font-family: sans-serif; color: #333; } body a { color: #C30D23; } /***** block *****/ /* main */ .main { width: 960px; margin: 0 auto; } .main__title { color: #333; font-size: 2em; } .main__lede { font-size: 1em; } /* inner */ .inner { margin: 0 0 40px; } .inner__title { padding: 10px; background: #eee; border-left: 2px solid #C30D23; font-size: 1.5em; line-height: 1.2; } .inner__text-em { font-weight: bold; background: #eee; padding: 5px; color: #C30D23; } .inner__text-bikou { font-size: 0.8em; } .inner__text-bikou:before { content: "※"; } .inner__text-btn { background: #C30D23; color: #fff; padding: 10px; }
ファイル構成
「src/scss」フォルダの最終的な構成
- scssフォルダ直下にstyle.scssがある
- scssフォルダの下層にbaseフォルダ、blockフォルダがある
- baseフォルダの中に_base.scssがある
- blockフォルダの中にmain.scss、inner.scssがある
おまけ:@importは将来的になくなる!?
Sassの公式サイトで@import
の情報が見つけにくいと思ったら…
なんと!@import
は将来的に廃止される予定なんだとか!
@useと@forwardという2つのルールが登場し、@importルールは将来的に廃止される予定です。
@importルールがかかえる多くの問題があります。ファイルスコープがないため依存モジュールの把握が困難になったり、名前空間を持たないためにライブラリの作者と利用者が命名を工夫しないといけなかったり
※参考:Sassの新しいモジュールシステム - シフトブレイン/スタンダードデザインユニット
@import
自体がまだ使い始めたばかりで不便さを感じる前段階なのだがw
@use
と@forward
の書き方、使い分け方などもおいおいチェックして行きたく思う。
最後に
やってみた感想は、全体が1ファイルのCSSよりもモジュールがファイル分割されている方が修正箇所を探しやすい!
あと、ブロックを超えてページ全体に共通するアクセントカラーなどは変数化したくなってきた。モジュール分割した状態での変数の設定方法は次回以降にまた調べたく思います。@mixin
とかを使うのかな?
それではまた!
※メタ言語(HTMLテンプレートエンジン、AltCSS、AltJS)まとめ
qiita.com