Sass
「Sass（サス）」はCSSをより便利かつ効率的に書くことができる言語です。
SassにはSASS記法とSCSS記法の2種類の書き方があります。今回は主流であるScss記法です。
ファイル拡張子は「.scss」となります。
Sassを使う事で、記述を減らせたり関数を設定してコードを再利用したりできます。
Sassは「入れ子構造」を取ることができ、1つのセレクタの中に別のセレクタを入れ子にして指定することができます。結果、同じセレクタを何度も書かずにすみます。
入れ子構造を使うとクラス名の変更が楽になりますCSSでは何箇所も変える必要があるところが、Sassでは1箇所の変更で済ませることができることもあります。
<divclass="contents"><ul><li>リスト1
</li><li>リスト2
</li></ul></div>CSSの書き方
.contents{hight:80%;}.contentsul{/* .contentsにあるulタグに対するCSS*/padding:15px;}Sassの書き方
.contents{hight:80%;}ul{padding:15px;}&(アンバサンド)記号
SaasではCSSの「セレクタ:hover」を「&:hover」というように書き換えることができます。
この「&」はhoverだけでなく、他にも使うことができます。
CSS
li{font-size:12px;}li:hover{background-color:blue;}Saas
li{font-size:12px;&:hover{background-color:blue;}}特定の要素にCSSを当てる
CSSで特定の部分を装飾したいときは繰り返し要素名を書く必要がありますが
Sassだと&記号を使えば済むので書きやすく見やすくなります。
<ul><liclass="top">上
</li><liclass="center">真ん中
</li><liclass="bottom">下
</li></ul>CSSの書き方
li{font-size:15px;}li.center{color:blue;}Sassの書き方
li{font-size:15px;}&.center{color:blue;}変数
値を入れておく箱のようなもので同じ値を繰り返し使うための便利なものです。
変数は「$変数名: 値;」で定義します。「変数に値を入れる」という意味で、代入するといいます。
$favorite-color:skyblue;変数の使い方
使用したい箇所で変数名を記述することで、変数に格納されていた値で自動的に置き換えられます。
同じ値を繰り返し使えるようになり、変更も簡単になります。
スタイルシート（CSS）は上から順に読み込まれていくので、
変数は利用する箇所より前で定義しないと使えません。
変数は利用できる範囲を「スコープ」といいます。スコープ外だと変数を読み込むことができません。
基本は入れ子構造の一番外で定義しましょう。
$favorite-color:skyblue;hi{color:$favorite-color;}P{color:$favorite-color;}hi{color:$favorite-color;$favorite-color:skyblue; h1の中でしか使えない}P{color:$favorite-color;}mixin
いくつかのコードを1つにまとめ、簡単に呼び出すことができる機能です。
同じコードを何度も書く必要がなくなり、無駄なコードを省略することができます。
mixinの定義
「@mixin mixin名 { コード }」とすることで定義できます。
@mixinexample{background-color:green;font-size:20px;}mixinを呼び出す
使用したいSassファイルの中で「@include mixin名」とすることで使うことができます。
CSSに比べてコードの記述量が少なくてすみます。
@mixinexample{font-size:20px;background-color:green;}example1{@incrudeexample;}example2{@incrudeexample;}引数
mixinには色などの情報を「引数（ひきすう）」として渡すことができます。
引数は様々なプログラミング言語で使われ、追加で情報を渡すことができます。
@mixinexample($color){font-size:20px;background-color:green;color:$color;}example1{@incrudeexample(gray); #colorをグレーに指定}example2{@incrudeexample(orange); #colorをオレンジに指定}関数
Sassでは様々な関数が用意されています。
abs($value)
指定した数値の絶対値を返します。
Sass.example{margin-top:abs(-100px);}CSS（コンパイル後）.example{margin-top:100px;}・darken($color, $amount)
指定した色の明度を下げて暗くします。
Sass.example{color:darken(hsl(123,60%,40%),10%);color:darken(#556ac4,15%);color:darken(white,70%);}CSS（コンパイル後）.example{color:#1f7a23;color:#354798;color:#4d4d4d;}Web制作者のためのSassの教科書 - 公式サポートサイトより引用
https://book.scss.jp/
import
外部のファイルを読み込む物で読み込み先のファイル名の先頭に「_（アンダーバー）」を付けます。
また、ファイルを読み込むた際は「@import "ファイル名"」とします。
変数をまとめたファイルを作成し読み込んでみましょう。
$sea:blue;$plant:green;$sun:orange;変数を定義したファイルをインポート
@import"variables";.sea{color:$sea;}.plant{color:$plant;}.sun{color:$sun;}知っておくとコードの記述効率アップ「Emmet」
Emmetとは？
HTMLやCSSの記述をサポートしてくるプラグインのことです。
省略した書き方でHTMLを記述できるので効率が格段に上がります。
例
div*3
<div></div><div></div><div></div>div>a
<div><ahref=""></a></div>詳しくはチートシートをご覧ください
https://docs.emmet.io/cheat-sheet/
以上です。
