2021年06月04日(金曜日)
スタイルシート言語であるSassについてと、BEMという方法論についての勉強会を開催しました。
■概要
フロントエンド寄りの勉強会として
Sassの導入と使用方法についてと、BEMという方法論についての説明
■Sassについて
・「Syntactically（文法的に） Awesome（イケてる・すごい） StyleSheet（スタイルシート）」の略
・CSSのメタ言語
「CSSを拡張して、より効率的に書けるようにしたもの」ということ
・クラス・ドキュメントにCSSを当てることに慣れたらSassを使ってみると良い
・記述量として、CSSで10分で書いたものがSassなら3分で終わる
★Sassのメリット
・記述量を減らせる
・1つのファイルでまとめられるので管理が便利
・@importで使える
・関数を使える（if文, for文）
・変数にカラーコード格納できる
★Sassのデメリット
・ブラウザはSassを理解できない
・コンパイルが必要
・変更点を把握し辛い
・無用にファイル分けすぎると問題
★初心者が陥りやすい箇所
・HTMLにSassを直接読み込もうとし、CSSが効いてないことがよくある
・コンパイル用ツールは、プロジェクトに入る前に何を使っているか確認が必要
→ツールによってクセがある
・ファイルについて
「.scss」ファイルからコンパイルされたものが「.css」ファイル
（.scssを書いていくと、コンパイルされたものが.cssファイルに自動で書き込まれるイメージ）
「css.map」は消去してはいけない
★コンパイラー例
・Compass
・Prepros
・Gulp
・Npm など
・VSCodeの拡張機能
すでにVSCodeを使用している人は簡単に取り入れられそうな印象があるかもしれないが
設定に手間がかかり、プロジェクトに合わないことが多い
■BEMについて
フロントエンド設計方法のひとつで、class名の命名ルールのこと
Block(かたまり)を構成するのがElement(要素)
Modifier(修飾)は、Block(かたまり)とElement(要素)のスタイルや状態を修飾する
★BEMを意識したSassの記述方法
・Blockを親として、ネスト内に「&__」を付けてElementを記述していく
・&を入れることで、Block（親）クラスを省略できる
・Modifierは「&–」の後にoption（任意名）と記述すればOK
■概要
フロントエンド寄りの勉強会として
Sassの導入と使用方法についてと、BEMという方法論についての説明
■Sassについて
・「Syntactically（文法的に） Awesome（イケてる・すごい） StyleSheet（スタイルシート）」の略
・CSSのメタ言語
「CSSを拡張して、より効率的に書けるようにしたもの」ということ
・クラス・ドキュメントにCSSを当てることに慣れたらSassを使ってみると良い
・記述量として、CSSで10分で書いたものがSassなら3分で終わる
★Sassのメリット
・記述量を減らせる
・1つのファイルでまとめられるので管理が便利
・@importで使える
・関数を使える（if文, for文）
・変数にカラーコード格納できる
★Sassのデメリット
・ブラウザはSassを理解できない
・コンパイルが必要
・変更点を把握し辛い
・無用にファイル分けすぎると問題
★初心者が陥りやすい箇所
・HTMLにSassを直接読み込もうとし、CSSが効いてないことがよくある
・コンパイル用ツールは、プロジェクトに入る前に何を使っているか確認が必要
→ツールによってクセがある
・ファイルについて
「.scss」ファイルからコンパイルされたものが「.css」ファイル
（.scssを書いていくと、コンパイルされたものが.cssファイルに自動で書き込まれるイメージ）
「css.map」は消去してはいけない
★コンパイラー例
・Compass
・Prepros
・Gulp
・Npm など
・VSCodeの拡張機能
すでにVSCodeを使用している人は簡単に取り入れられそうな印象があるかもしれないが
設定に手間がかかり、プロジェクトに合わないことが多い
■BEMについて
フロントエンド設計方法のひとつで、class名の命名ルールのこと
Block(かたまり)を構成するのがElement(要素)
Modifier(修飾)は、Block(かたまり)とElement(要素)のスタイルや状態を修飾する
★BEMを意識したSassの記述方法
・Blockを親として、ネスト内に「&__」を付けてElementを記述していく
・&を入れることで、Block（親）クラスを省略できる
・Modifierは「&–」の後にoption（任意名）と記述すればOK
