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

本日の学習範囲

（学習時間：8.5時間）

ドットインストール

https://dotinstall.com/lessons/basic_sass
Sass/SCSS入門 #01〜#10

※ #11〜#15の学習メモ↓
Saas/SCSS② 〜@function/パーシャル・@import/@mixin・@include/@extend〜

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ファイル

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

CSSファイル

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

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

コメント記法

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

&記号

SCSSファイル

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

CSSファイル

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

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

変数

SCSSファイル

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

CSSファイル

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

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

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

SCSSファイル

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

CSSファイル

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

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

lighten() / darken()

SCSSファイル

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

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ファイル

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

CSSファイル

#main {
  color: red;
}

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

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

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ファイル

.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 リスト {処理}で、リストの各要素に対して処理を実行する