sassの使い方を勉強してみた

# はじめに
仕事でsassを使用しているとのことなので学習してみました。sass特有の表記などありますが、特に関数、@mixinと@extendの棲み分け等は気を付けておかなければならないと思います。sassには２種類の記法があり、.sassと.scssがあるようです。現在は.scssが主流です。
# 入れ子
sassでは入れ子構造にすることが可能です。#main p {}と書く必要はなく、#mainの中に直接pを入れ子にしています。
```test.scss
#main {
 font-size: 16px;
 p {
   color: red;
 }
}
```
# 変数
変数を$○○の形で定義することにより、scss内で使用することができます。変数は文字列のみならず、数値、真偽、色など設定可能です。
```test.scss
$fontBase: 16px;
#main {
 font-size: $fontBase;
}
```
# 色に変化をつける
色も変数として使用可能です。さらにlightenとdarkenを使うことで指定した割合分暗くしたり、明るくしたりすることができます。
```test.scss
$baseColor: red;
#main {
 color: $baseColor;  ・・・red
}
#light {
 color: lighten($baseColor, 30%)  ・・・redより30%明るくなる
}
#dark {
 color: darken($baseColor, 30%)  ・・・redより30%暗くなる。
} 
```
# If文
真偽値によって条件分岐をすることも可能です。
```test.scss
$test: true;
#main {
 @if $test == true {
  color: red;    ・・・値はtrueなので赤になる
 } @else {
  color: yellow;
 }
} 
```
# for文、while文
for文やwhile分も使えます。下のように記述すると下記cssと同様になります。
```test.scss
@for $i from 10 through 14 {
  .fs#{$i} {
    font-size: #{$i}px;
  }
}
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
$i: 10;
@while $i <= 14 {
  .fs#{$i} { font-size: #{$i}px; }
  $i: $i + 1;
}
```
```test.css
.fs10 {
  font-size: 10px;
}
.fs11 {
  font-size: 11px;
}
.fs12 {
  font-size: 12px;
}
.fs13 {
  font-size: 13px;
}
.fs14 {
  font-size: 14px;
}
--------------------------------------------------
.fs10 {
  font-size: 10px;
}
.fs11 {
  font-size: 11px;
}
.fs12 {
  font-size: 12px;
}
.fs13 {
  font-size: 13px;
}
.fs14 {
  font-size: 14px;
}
```
# リスト
この辺りはrubyの繰り返し処理と似ています。複数要素を順番に取り出すことができます。
```test.scss
$subjects: Japanese, English, Math;
@each $subject in $subjects {
 .#{$subject}-icon { background: url("#{$subject}.png");}
}
```
```test.css
.Japanese-icon {
  background: url("Japanese.png");
}
.English-icon {
  background: url("English.png");
}
.Math-icon {
  background: url("Math.png");
}
```
# 関数
@function 関数名で関数を定義し、呼び出すことが可能です。下の関数は並べた要素の幅を自動計算する関数です。
```test.scss
$totalWidth: 940px;
$columnCount: 10; 
@function getColumnWidth($width, $count) {
  $padding: 10px;
  $columnWidth: floor(($width - ($padding * ($count - 1))) / $count);
  @return $columnWidth;
}
.grid {
  float: left;
  width: getColumnWidth($totalWidth, $columnCount);
}
```
```test.css
.grid {
  float: left;
  width: 85px;
}
```
# ファイルの分離
上記関数を次のように分離することができます。その時@importを表記することが必要です。
```_settings.scss
$totalWidth: 940px;
$columnCount: 10; 
```
```_functions.scss
@function getColumnWidth($width, $count) {
  $padding: 10px;
  $columnWidth: floor(($width - ($padding * ($count - 1))) / $count);
  @return $columnWidth;
}
```
```test.scss
@import "settings";
@import "functions";
.grid {
  float: left;
  width: getColumnWidth($totalWidth, $columnCount);
}
```
# mixin 
@mixinとして複数の処理を定義しておき、使用することができます。ここではroundを呼び出すことでborder-radius: $radius;を使用できます。呼び出す際は@includeを使用します。引数を渡すことで角の丸さを調整できます。
```test.scss
@mixin round($radius: 4px) {
  border-radius: $radius;
}
.label {
  font-size: 12px;
  @include round(10px);    ・・・border-radius: 10px;が定義される                                                 
}
```
# extend
こちらもいくつかの要素を定義して呼び出すことが可能です。呼び出す際は@extendを使います。.msgに定義した要素を呼び出しています。                                                  
```test.scss
.msg {
  font-size: 12px;
  font-weight: bold;
  padding: 2px 4px;
  color: white;
}
.errorMsg {
  @extend .msg;
  background: red;
}
.warningMsg {
  @extend .msg;
  background: orange;
}
```
```test.css
.msg, .errorMsg, .warningMsg {
  font-size: 12px;
  font-weight: bold;
  padding: 2px 4px;
  color: white;
}

.errorMsg {
  background: red;
}

.warningMsg {
  background: orange;
}
```

以上

# 参考
ドットインストール
https://dotinstall.com/