Sassのおさらい（基礎知識まとめ）

※友人からのレクチャーをノートにまとめてあった内容を自分用に転記

Sassが必要な理由

• レスポンシブが主流（SEO的なことで）
• CSSアニメーションの方がJavascriptより早い
• CSSの記述が長くなってしまうのをSassでまとめる
• CSSはプログラミング言語として機能しきれていない

Sassを導入すると

• CSSより少ないコード
• コードの再利用性アップ
• メンテナンス性アップ（整理しやすい）

抑えておくべき用語

CSSプリプロセッサ（CSSメタ言語）

• Sassは「CSSプリプロセッサ」である。CSSを使いやすくするためのもの
• 他にLess、PostCSS等の種類がある。人気どころはSassだが、機能的にとくに差異はない

ベンダープレフィックス

• ブラウザ毎のクセを解しようとすること

コンパイル

• SassファイルをCSSファイルに変換すること
• .scss→.cssというように拡張子が変わる

コンパイラ

• コンパイルしてくれるソフトフェア
• Codepen、Koala、gulp-sass+Gulp.jsなどがある

ネスト

• 同じ記述を繰り返さない
• 関係が可視化
• @mediaをセレクタより内側に書ける
• 複雑なルールも短く書ける
• やりすぎ注意（チームのルールに則ること）

likethis.sass

.contents {
 h1 { font-size: 32px; }
 h2 { font-size: 28px; }
 p { 
  span { font-weight: bold; }
 }
}

変数

• 値に名前をつけて流用できる。$theme-color: #333;というように
• 入れ子にも書いてOK（入れ子でしか流用できない）
• 同じ変数に複数回値が入った場合、その変数が使われている場所で最新の値が適用される
• 変数名の頭に数字を入れない

likethis.sass

// サイトのテーマカラー
$theme-color-text: #333;
$theme-color-link: #00f;

h1 { color: $theme-color-text; }
h2 { color: $theme-color-text; }
a { color: $theme-color-link; }

良い使い方

• サイト全体で使うものは初めに宣言
• 長めの名前で被り防止
• ある場所でしか使わない時は入れ子内で短い名前で

演算

• 同じ単位同士での四則計算が可能
• 小数点、変数も使える

likethis.sass

// 画面幅の1/3
.contents { width: 100% / 3; }

基本機能

@import

• 別のSassファイルを呼び出す呪文

likethis.sass

@import "_common.scss";

@mixin

• スタイリングに名前をつけてプリセット化して使いまわせる呪文
• 引数（パラメータ）が使える

likethis.sass

// プリセットを指定
@mixin my-pattern ( $line-height, $font-family, $font-size ) {
 line-height: $line-height;
 font-family: $font-family;
 font-size: $font-size;
}

// プリセットを利用
.contents { 
 @include my-pattern ( 1.5, Roboto, 16px );
}

↓コンパイル後

likethis.css

.contents { 
 line-height:　1.5;
 font-family: Roboto;
 font-size: 16px;
}

補足

• SASS記法はRuby風、SCSS記法はCSS風

参考（教材）