DAY27.Sass学習編 Sassを学習

01.Sassとは

構造的にイカしたスタイルシート
「Syntactically Awesome StyleSheets」
の頭文字をとって名付けられた、CSSの拡張言語

CSSをより楽に書くための言語

Sassで書くとベタでCSSを書くより圧倒的に早い

Sassの書き方2種類
①Rubyのようにインデント形式で書いていく『SASS』スタイル
②CSSと同じようにカッコでくくる『SCSS』スタイル

主流は『SCSS』スタイル

02.入れ子

1.Sassの入れ子の書き方

親要素 {
　//処理
　子要素 {
　　//処理
　}
}

2.入れ子で孫要素まで

親要素 {
　//処理
　子要素 {
　　//処理
　　孫要素 {
　　　//処理
　　}
　}
}

03.似要素とクラスの書き方

＆でつなげる擬似要素・クラスの書き方

&を使うと前の文を継承することができる

&:hover
&.active

04.変数

変数の定義
$変数名: 処理;

処理に$変数名を入れる

変数にしているところはその変数を変えるだけで
一括で変更が出来るので保守性が高い

よく使うカラーやフォントサイズなどは変数に置き換えると良い

変数で四則演算も出来る
$変数名 + 値;

05.定義したスタイルを使いまわす

1.@extendの使い方

すでに設定してあるスタイル（別クラス）を引き継ぐことが出来る

@extend .クラス名;

2.@mixinの使い方

mixinは引数を作れる
型だから一部変更して使える

@mixin 名前(引数) {}

呼び出す時
@include 名前(値);

一部だけ変更したいけど大体使い回したい方がある時に使う

メディアクエリでよく使う

06.【重要】mixinを使ったブレイクポイントの記述

実務でよく使うmixinを使ったメディアクエリの設定方法

mixinの１番の使いどころはメディアクエリ

//マップ型変数breakpointsを定義
$breakpoints: (

//キー　　値
　'sp': 'screen and (max-width: 767px)', 　//767px以下（スマホ）用の表示 　'pc': 'screen and (min-width: 768px)' 　//768px以上（PC）用の表示
) !default;

//メディアクエリ用のmixinを定義。デフォ値はmd
@mixin mq($breakpoint: sp) {

//map-get(マップ型変数, キー)で値を取得
　@media #{map-get($breakpoints, $breakpoint)} {
　　//この中をカスタムできる
　　@content;
　}
}

//使用例
.header {
　height: 100px; 　//ＰＣ用の表示
　@include mq(sp) {
　　height: 60px; 　//スマホの時だけ高さを60pxに！
　}
}

このように @media screen and (width: 767px) { } を書かなくても、
PC用のcssを書きながらスマホ用の表示を書き足すことができます！

07.functionを使う

functionで処理を使い回す

定義の仕方
@function 関数名(引数) {
　@return 処理(四則演算などもできる);
}

使い方
関数名(引数);

08.Sassの要点まとめ

Sassのメリット
・入れ子（ネスト）形式で書ける
・変数が使える
・”&”記号で擬似要素が書ける
・@mixinでコードの繰り返し記述を防げる

まずは入れ子・変数・”&”記号・@mixin（メディアクエリ）の4つ

Sassを使えるかどうかでコーディングスピードが変わる

制作現場でも必須スキルとして求められるもの

Sassを使えば、「CSSの管理しずらい」という問題を少なからず解決

CSSが管理しやすくなる
①どこに書かれているか分かる
②値を変数で管理できる
③入れ子で管理できる
④アイテムごとのまとまりとしても把握しやすい
⑤記載するコーディング量が減る

変数で一元管理して使うようにすると、あとからの修正が楽

ファイルごとに役割を決めて管理
・base：リセットCSSや要素の基本となるCSSを格納
・mixin：アニメーションやmixinや関数を格納
・module：使い回しできるモジュール的なCSSを格納
・page：ページごとに必要なCSSを格納
・setting：変数を格納
・style.scss：上記のフォルダ群をまとめるファイル

変数とかmixinなど先に読み込んでおかないといけないところから
先に読み込んでいく

pageの中ではさらに、ページごとにフォルダを作る

ページごとにフォルダを新しく作りさらにセクションごとにファイルを作る

ページごとやセクションごとに分けることで
どこに該当のCSSが書かれているかがすぐに分かる