Saas/SCSS① 〜概要/ネスト/コメント/&/変数/文字列の連結/インターポレーション/色の関数/条件分岐/ループ〜

# 本日の学習範囲
（学習時間：8.5時間）

### ドットインストール
https://dotinstall.com/lessons/basic_sass
Sass/SCSS入門 #01〜#10

※ #11〜#15の学習メモ↓
[Saas/SCSS② 〜@function/パーシャル・@import/@mixin・@include/@extend〜](https://qiita.com/megumi_ohashi/items/1462659505752134a79b)

### Progate
https://prog-8.com/lessons/sass/study/1
Sass Ⅰ 入れ子構造〜&記号(2)

## Sass/SCSS学習メモ

### Sassの概要
https://sass-lang.com/
「Syntactically Awesome Style Sheets」の略
CSSを効率的に記述できるように開発された言語
コンパイルする必要がある
※コンパイル：プログラムのソースコードをコンピューターが実行可能な形式に変換すること
SassとSCSSでは、書き方が異なる
Sass…CSSとの互換性が十分ではなかった
→{}を使いCSSに近い書き方ができるSCSSが誕生、主流に

### ネスト(入れ子)

SCSSファイル

```scss
#main {
  background-color: blue;
  p {
    font-size: 14px;
  }
}
```

CSSファイル


```css
#main {
  background-color: blue;
}
#main p {
  font-size: 14px;
}
```

親セレクタの中に子孫セレクタの記載が可能

### コメント記法

```scss
/* CSSファイルに反映される */
// CSSファイルに反映されない
```

### `&`記号

SCSSファイル

```scss
#main {
  width: 90%;
  p {
    font-size: 16px;
    a {
      text-decoration: none;
      &:hover {
        font-weight: bold;
      }
    }
  }
}
```

CSSファイル

```css
#main {
  width: 90%;
}
#main p {
  font-size: 16px;
}
#main p a {
  text-decoration: none;
}
#main p a:hover {
  font-weight: bold;
}
```

`&`で親のセレクタを参照する

### 変数

SCSSファイル

```scss
$baseFontSize: 14px;
#main {
  width: 90%;
  p {
    font-size: $baseFontSize;
    .sub {
      font-size: $baseFontSize - 2px;
    }
  }
}
```

CSSファイル

```css
#main {
  width: 90%;
}
#main p {
  font-size: 14px;
}
#main p .sub {
  font-size: 12px;
}
```

変数：文字列や値を入れておく箱（中身の変更可能）
cf.定数：文字列や値を入れる箱（中身の変更不可）
`$変数名: 値;`で、値を変数として宣言する
変数の値をプロパティの値として使用する場合、`$変数名`で記載する

### 文字列の連結+ `#{}`(インターポレーション)

SCSSファイル

```scss
$imgDir: "../img/";
#main {
  width: 90%;
  background: url($imgDir + "bg.png");
  background: url("#{$imgDir}bg.png");
  p {
    font-size: #{12 + 12}px;
  }
}
```

CSSファイル

```css
#main {
  width: 90%;
  background: url("../img/bg.png");
  background: url("../img/bg.png");
}
#main p {
  font-size: 24px;
}
```

`"文字列"+"文字列"`で、文字列を連結する
`$変数名: "文字列";`で、文字列を変数として宣言する
変数の文字列を文字列内で使用する場合、`#{$変数名}`で記載する(宣言時の""は消えて表示される)
また、インターポレーション`#{}`を使用すれば、演算できない部分でも演算が可能

### `lighten()` / `darken()`

SCSSファイル

```scss
$brandColor: rgba(255,0,0,0.9);
#main {
  width: 90%;
  p {
    color: $brandColor;
    color: lighten($brandColor, 30%);
  }
}
```

CSSファイル

```css
#main {
  width: 90%;
}
#main p {
  color: rgba(255, 0, 0, 0.9);
  color: rgba(255, 153, 153, 0.9);
}
```

色も変数として宣言が可能
`lighten(色,%)`で、その色の明るさを指定したパーセンテージの分だけ明るくした色にする
`darken(色,%)`で、その色の明るさを指定したパーセンテージの分だけ暗くした色にする

### 条件分岐(`@if`・`@else`)

SCSSファイル

```scss
$debugMode: true;
$x: 10;
#main {
  @if $debugMode == true {
    color: red;
  } @else {
  color: green;
  }
  p {
    @if $x > 20 {
      color: yellow;
    }
  }
}
```

CSSファイル

```css
#main {
  color: red;
}
```

`@if 条件 {条件に合う場合の処理} @else {条件に合わない場合の処理]`
等価演算子`a == b`は、値を比較する
cf.厳密等価演算子`a === b`は、値だけでなくデータ型も比較する

### ループ(`@for`・`@while`・`@each`)

SCSSファイル

```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;
}
@each $animal in cat, dog, tiger {
  .#{$animal}-icon {
    background: url("#{$animal}.png");
  }
}
$animals: cat, dog, tiger;
@each $animal in $animals {
  .#{$animal}-icon {
    background: url("#{$animal}.png");
  }
}
```

CSSファイル

```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;
}
.cat-icon {
  background: url("cat.png");
}
.dog-icon {
  background: url("dog.png");
}
.tiger-icon {
  background: url("tiger.png");
}
.cat-icon {
  background: url("cat.png");
}
.dog-icon {
  background: url("dog.png");
}
.tiger-icon {
  background: url("tiger.png");
}
```

`@for $変数名 from 開始値 through 終了値 {処理}`の場合は、終了値まで繰り返し処理される
`@for $変数名 from 開始値 to 終了値 {処理}`の場合は、終了値の手前まで繰り返し処理される
`@while 繰り返しの継続条件 {処理(スタイルなどの指定) 繰り返し条件の設定(変数の演算処理)}`
`@each $変数名 in リスト {処理}`で、リストの各要素に対して処理を実行する