Sassのファイルの読み込み方にも各々癖がある
Sassを使うメリットの一つは、共通フッターやヘッダーなどのパーツ部分を@importで読み込めること。
でも人によって結構くせがあるんだな、とも思う。
例えば index.html と detail.html の２つのHTMLファイルにSass（scss）を適応するとする。
1. @importするファイル専用のファイルを使う場合
common.scss
@import "./_header.scss"
@import "./_footer.scss"
を作って、それぞれのファイルで読み込む
index.scss
@import "./common.scss"
.l-mainContent {
・・・
detail.scss
@import "./common.scss"
.l-detailContent {
・・・
メリット
-
common.scssを読み込むだけでいいのでスッキリしたコードになる
デメリット
- 少し読み込むファイルが違ったりすると、その部分は直接@importしないといけない
- 各々のファイル構成がわかりにくくなる
メリット・デメリットは完全なる私の主観です。
個人的には次の方法の方が好き。
追記
jadeやLaravelのBladeのようにテンプレートエンジンを使う場合、<head></head>部分は共通だったりする。
その場合、読み込むCSSは１つだけの方にしておくほうが都合が良いということに気づいたのでやはりこの方法のが良いかもしれない。
2. それぞれのファイルで毎回@importする場合
index.scss
@import "./_header.scss"
@import "./_footer.scss"
.l-mainContent {
・・・
detail.scss
@import "./_header.scss"
@import "./_footer.scss"
.l-detailContent {
・・・
メリット
ファイル構成がわかりやすい- 必要なcssの要素がわかりやすい
デメリット
- いちいち読み込ませるのがめんどくさい
いちいち書くのが面倒だけど、ファイル構成がわかりやすい方が好きなので私はこっちを普段使ってる。
（でも本当は１つめのやり方のほうがいいんだろうな、とも思う）
どちらにせよ、人が書いたコードの構成は初めにちゃんと理解しておくべき
そして、他の人がコードを触る時はできるだけその人のルールに則って手直ししたりしたいなぁと思います。
HTML構造を使って詳細度の高いCSS（Sass）を書くとレイアウト変更時に困るかも
index.scss
.l-main {
width: 80VW;
height: 50VW;
.contentBox {
color: blue;
width: 80px;
height: 40px;
.contentBox_title {
color: red;
text-decoration: underline;
}
}
}
index.html
<div class="l-main">
<div class="contentBox">
<h1 class="contentBox_title">タイトル</h1>
</div>
</div>
もし、このhtmlが次のように変更された場合。
index.html
<div class="l-main">
<div class="contentBox">
<div class="contentBox_subBox>
<h1 class="contentBox_subBox_title">タイトル</h1>
</div>
</div>
</div>
scssはこうなる。
index.scss
.l-main {
width: 80VW;
height: 50VW;
.contentBox {
color: blue;
width: 80px;
height: 40px;
.contentBox_subBox {
.contentBox_subBox_title {
color: red;
text-decoration: underline;
}
}
}
}
.contentBox_subBox{} についてはなくてもいいんだけど、一旦ネストしまくるコードを書き出すと途中で変えると変な感じがしてつい書いてしまう。
そしてネストが深すぎるコードはややこしい。
解決策：ネストを浅くする
はじめからこうしておくと
index.scss
.l-main {
width: 80VW;
height: 50VW;
.contentBox {
color: blue;
width: 80px;
height: 40px;
}
.contentBox_title {
color: red;
text-decoration: underline;
}
}
変更時もスマート。そして見やすい。
index.scss
.l-main {
width: 80VW;
height: 50VW;
.contentBox {
color: blue;
width: 80px;
height: 40px;
}
.contentBox_subBox_title {
color: red;
text-decoration: underline;
}
}
BEMを利用して名前を付けておけばネストしなくても親子関係は十分わかる。
次からはちゃんとこの書き方にしよう。