20201126 Sass&BEM
授業メモ
SaasとBEMについて
〇Saas
メタ言語（対象言語を一段高い次元から論じる言語）。
CSSを効率的に記述していくための言語
学習コストが高く、あまり普及しなかった
→CSSさえ分かっていれば記述できる
拡張子「.sass」を使用する「SASS記法」：元からある記法
拡張子「.scss」を使用する「SCSS記法」：後から追加された記法
・導入手順
VscodeにLive Sass Compilerをインストールする。
→画面右下にコンパイラーのロゴがでる
scssに記述するするときはコンパイラーを起動すること。
拡張機能「HTML hint」をアンインストールしたあとじゃないとエラーになるので注意
〇SASS記法
Sassファイルを拡張子「.sass」で作成
CSSのブロックを「{}」ではなくインデントで表現
命令終了の「;」を省略
Sassファイル（Scssファイル）に記述するとCSSファイルにも同時に記述される
例））
〇入れ子
ul{
list-style: none;
padding-left: 0;
li{
border-bottom: solid 1px;
}
}
〇&を使用
a{
color: aqua;
&.-btn{
border: solid;
↑
// [&]は親セレクタを意味する
}
&:hover{
text-decoration: none;
}
}
〇「$変数名」
$color-base:red;
$color-key:blue;
上記のようによく使う値を変数に代入して使用できる。
文字色や背景色などのカラーコード
フォントファミリー
カラム幅
ブレイクポイント等・・・。
EX））
$color-key:yellow;
li{
border-bottom: solid 1px $color-key;
}
↑色の一元管理が可能になる
$path: '../img/';
.block {
background-image: url(#{$path}bg.png);
}
ファイルパスも変数化することが可能
文字列として変数を使用する場合は#{変数名}画像ファイル名.png
〇パーツ化して利用
パーツ化は主流
・style.scss：本体CSSには
@import 'parts/header.scss';
@import 'parts/footer.scss';
を記述することによってheaderとfooterのパーツを本体CSSに
読み込ませることができる
※拡張子を省略することも可能
部品化されたSassファイル
ファイル名の前に「＿」を入れることで部品Sassと明示することができる
〇よく使う記述を部品化：@mixin
mixinフォルダをCSSフォルダ内で作成
→_media.scssファイルを作成。
下記を記述
@mixin pc {
@media screen and (min-width: 480px) {
@content;
}
}
@mixin sp {
@media screen and (max-width: 479px) {
@content;
}
}
↑レスポンシブ対応のCSSを記述することができる。
これは一例。
部品の呼び出し：@include
例））
.header{
padding: 60px;
@include sp{
color: red;
}
@include pc{
color: blue;
}
}
// mixinの定義方
// @mixin 呼出し名※関数名{
// 呼び出されたときに記述される内容
// @contentは呼出し時のブロック内の内容を反映させる
// }
〇BEMについて
よく使われるclass名の命名規則
HTMLにclass名をつける時の代表的な命名規則には以下の3つ。
・BEM（Block-Element-Modifier：ベム）
・SMACSS（Scalable and Modular Architecture for CSS：スマックス）
・BEMのメリット
パーツ単位でデザインを管理する為、変更時に他のパーツへの影響を考慮しなくていい
BEMを採用している会社が多い
・BEMのデメリット
class名が長い
すべての要素にclass名を付与するのでHTMLが読みづらくなる
Bootstrapとの相性が悪い（BootstrapはOOCSSを採用している）
・Block パーツ単位の管理
パーツとして独立完結しており別場所に移動しても機能する
Block内にBlockが入れ子になってもOK
※ただしスタイルはBlock単位で記述し、複数のBlockをまたいでの子孫セレクタを使用しない
例））「ヘッダーパーツ」「アイキャッチパーツ」「ナビパーツ」等、大枠の区切り
命名のルール
<div class="block名">
・Element パーツ内の部品
必ずBlock内にある
同じElemantが複数存在してもOK
Element内にElementが入れ子になってもOK
※入れ子が深くなる時はElement内でBlockを作成できないか検討する
命名のルール
<div class="Block名__Element名">
ElementはBlock名の後に「_（アンダースコア）」を2つでつなぐ。
この「_（アンダースコア）」2つを「セパレーター」や「区切り文字」と呼び、
後述のModifierの区切りや名前の区切りと判別できるようする。
※名前が2つ以上の単語になる場合
<div class="logo__company-name">
BlockやElementの名前の単語が2つ以上になる場合は「-（ハイフン）」で単語を繋ぐ
・Modifier
パーツのバリエーション（状態）：Modifier
パーツ構成は一緒だが「見た目」や「動き」の違うパーツを作成する際にModifierを使用。
Modifierのルール
既存のBlockもしくはElementに付与する
１つのパーツに複数Modifierを付与してもOK
命名のルール
<div class="Block名__Element名--Modifier名">
ModifierはBlock名やElement名の後に「-（ハイフン）」を2つでつなぐ。
・命名規則をカスタマイズ（変則BEMを考える）
BEMはclass名が長くなるというデメリットをもつ。そのデメリットを少しでも軽減する
ための工夫。
名前が2つ以上の単語になる場合
名前の単語が2つ以上になる場合は「-（ハイフン）」で単語をつないでいたが
キャメルケース記法で命名する。
<div class="intro-item">
キャメルケース記法（2つ目以降の単語の頭文字を大文字にしてつなぐ）に変換する。
→<div class="introItem">
〇SassとBEM組み合わせ
CSS用にid属性は使わない
class属性はBEMで命名する
基本的にすべての要素にclass属性を付与する
サイト共通のデザインを反映させる時は「_クラス名」と
「_（アンダースコア）」始まりで命名する
例）「_inner」「_pc」「_sp」等
JavaScript用のid属性やclass属性は「js-名前」と接頭辞「js-」をつける
・フォルダ構成
cssフォルダ
scssフォルダ：Sassファイル群
base：リセットとサイト共通定義
_init.scss：サイト共通定義
_reset.scss：リセットCSS
mixinフォルダ：サイト内で何度も使うデザイン定義群
_btn.scss：ボタンデザイン
_font.scss：書体関係デザイン
_form.scss：フォームデザイン
_media.scss：メディアクエリ
_other.scss：その他
moduleフォルダ：ブロック（パーツ）単位のSCSSファイル群
_ブロック名.scss：
page：ページ専用CSSが必要な時に使用するファイル群
index.scss：トップページ専用デザイン定義
setting：変数管理ファイル群
_config.scss：サイト共通変数
style.scss：使用するSCSSをインポートするファイル
