Sass勉強まとめ②

特徴③継承（mixin）で楽に書ける

mixinは、プロパティや値をセットにしてまとめることができる。

以下、mixinで記述

SCSS

CSS 

SCSSで「@mixin」と、mixinを使用する宣言をし、次に任意の名前を記述する（今回は「content-width」）。
波括弧以降にプロパティとその値を複数指定できる。

クラス名「header」にmixinで指定したプロパティと値を呼び出す場合、
「＠include　任意の名前（今回はcontent-width）;」と記述することで、
まとめて指定することができる。

ダブルコロン「；」を忘れないこと！

mixinのメリット
・サイト内で使い回しをする共通のスタイルがあれば、何度も同じコードセットを書く手間が省ける。
・修正が入った際など、mixinの一箇所だけ修正すれば、まとめて変更できる。

〜引数（ひきすう）を使用した記述〜

例1）
以下、mixinで記述

SCSS

CSS 

「@mixin」〜以降は”箱”で、値はそれぞれ指定する。
”箱”を作っておくことで、クラス名に処理内容に渡す値を記述するだけで良い。

先ほどと同様、mixinの宣言と任意の名前を、
呼び出し時には、includeの宣言と任意の名前を忘れない！

例2）
以下、mixinで記述

SCSS

CSS 

SCSS内、始めに初期値を設定しておいて、指示内容と違う場合は上書きすることができる。

引数について

「セットされた処理内容に渡す値」のこと。

・引数を使うメリット
　「プロパティはまとめておきたいけど、値は使う場所で切り替えたい」
　　このようなmixinを作りたいとき、引数を活用する。
・引数に初期値を与えておくメリット
　「ある程度は値だ共通だけど、場所によって変えることがある」

特徴④ファイルを分割できる

Sassはパーツごとにフォルダを分けて管理することが主流
今回は「Frocss（フロックス）」で作成する。
Frocssとは、モジュラーなアプローチのためのCSS構成案のこと。
・Foundation,Layout,Objectの3つのレイヤーから構成される。
・Objectレイヤーはさらに、Component,Project,Utilityの３つの子レイヤーに分けられる。
※レイヤーごとに詳細度に関するルールを定義することで、カスケーディングを管理する。

モジュラー：構成要素を組み合わせたもの。また、その一つ。
カスケーディング：カスケード処理のこと。指定が複数あるとき、あらかじめ決められた優先度のルールに沿って、優先度が一番高い指定が1つだけ有効になる仕組み。（優先順位決定の仕組み）

参考リンク
Sass　https://b-risk.jp/blog/2020/09/start-using-prepros-basic/
mixin　https://crestadesign.org/sass-mixin/#mixin-3
Frocss　https://qiita.com/s_sh/items/af83413aba86d6a51d9f