Sass/SCSS入門講座 ６章 制御構文を理解する

　チャプター6では、Sassでの制御構文について解説します。制御構文を使用することで、より効率的にCSSを記述することができるようになります。

「CSSを効率的に書く！Sassの入門講座」の第6章です。この講座については以下から確認できます。

講座の始まり

CSSを効率的に書く！Sassの入門講座　全8章 　この講座では「Sassの入門講座」を初心者の方でも問題ないように初歩の解説から小テストや実践を通して解説します。 ８章構成の講座になっていますので、気になってい…

比較演算子と論理演算子

比較演算子について

　Sassでは、比較演算子を使用することで、条件を判断することができます。比較演算子は、2つの値を受け取り、それらを比較し、結果を真trueか偽falseで返すものです。

Sassでは、次のような比較演算子が使用できます。

例えば、次のように、2つの値が等しいかどうかを判断することができます。

$value1: 10;
$value2: 10;
//※if構文については後述
@if $value1 == $value2 {
  // ここに処理を記述
}

論理演算子について

　Sassでは、andor notを使用することで、論理演算を行うことができます。これらの演算子は、条件分岐や繰り返し処理を記述する際によく使用されます。

条件分岐の記述方法

Sassでは、@ifを使用することで、条件分岐を記述することができます。
@ifを使用することで、条件に応じて、異なるスタイルを適用することができます。

@ifの書き方は、次のようになります。

@if 条件 {
  // ここに処理を記述
}

@ifを使用する場合、条件を記述する場所には、比較演算子や真偽値を使用することができます。

以下のサンプルでは、変数の値が偶数かどうかを判断し、条件に応じて処理を実行することができます。

$value: 10;

@if $value % 2 == 0 {
  // ここに処理を記述
}

また、複数の条件を指定するには、else ifを使用します。

@if 条件 {
  // ここに処理を記述
} @else if 条件 {
  // ここに処理を記述
}

elseは、すべての条件を満たさなかった場合に処理を行うことができます。

@if 条件 {
  // ここに処理を記述
} @else {
  // ここに処理を記述
}

else ifやelseを使用することで、より複雑な条件分岐を行うことができるようになります。

繰り返し処理の記述方法

　Sassでは、@for@while@eachを使用した、３つの繰り返し処理を記述することができます。

「@for」を使った繰り返し処理の記述方法

@forでの繰り返し処理の基本的な構文は以下の２つです。

@for $変数 from 初期値 through 終了値 {
  // ここに処理を記述
}

@for $変数 to $終了番号 {
  // 処理
}

from繰り返し処理を開始する番号を指定することができ、throughを使用すると、繰り返し処理を終了する番号を指定することができます。

toを使用すると、繰り返し処理を終了する番号を指定することができます。

「@while」を使った繰り返し処理の記述方法

@whileは、指定した条件が真（true）の間、処理を繰り返すことができます。

$変数: 条件;
@while $変数 {
  // ここに処理を記述
  $変数: 条件;
}

「@each」を使った繰り返し処理の記述方法

@eachは、指定した配列を1つずつ取り出して、繰り返し処理を行うことができます。

@each $変数 in $配列 {
  // ここに処理を記述
}

繰り返し処理の途中で処理をスキップする「@continue」

@continueを使用すると、繰り返し処理の中で指定した箇所以下をスキップすることができます。

@for $変数 from $開始番号 through $終了番号 {
  // 処理
  @if 条件 {
    @continue
  }
  // 処理
}

繰り返し処理の途中で勝利を中段する「@break」

@breakを使用すると、繰り返し処理を強制的に中断することができます。スコープ内で最も内側にある繰り返し処理を強制的に終了させることができます。

@for $変数 from $開始番号 through $終了番号 {
  // 処理
  @if 条件 {
    @break;
  }
  // 処理
}

解いてみよう！小テスト：本章の復習

制御構文について復習しましょう。

$foo: true;

@if $foo {
  body {
    background-color: #ff0000;
  }
}

body {
  background-color: #ff0000;
}

@for $i from 1 to 5 {
  .item-#{$i} {
    width: 100px * $i;
  }
}

.item-1 {
  width: 100px;
}

.item-2 {
  width: 200px;
}

.item-3 {
  width: 300px;
}

.item-4 {
  width: 400px;
}

$colors: red, green, blue;

@each $color in $colors {
  .#{$color} {
    color: $color;
  }
}

.red {
  color: red;
}

.green {
  color: green;
}

.blue {
  color: blue;
}

これらを実際に実装したサンプルはダウンロード教材のchapter06フォルダで確認できます。

リスキリングでキャリアアップしてみませんか？

リスキリング(学び直し)は、経済産業省が推奨しており、

今だけ、最大７０％のキャッシュバックを受けることができます。

最大70％の給付金が出るおすすめのプログラミングスクール！

リスキリングで給付金が出るスクールを７つ紹介 ≫

国策で予算が決められているため申し込みが多い場合は早期に終了する可能性があります！

興味のある方はすぐに確認しましょう。

チャプター６　「制御構文を理解する」のまとめ

チャプター６では、Sassで制御構文を使用することで、条件分岐や繰り返し処理を行う方法ついて学びました。

これらの技術を理解することで、Sassを使用した効率的でかつ複雑で柔軟なコーディングが可能になります。

チャプター

次章では、Sassの基本の「関数を理解する」学びます。

前のチャプター

Sass/SCSS入門講座 ５章 ファイルの分割とインポートを理解する チャプター５では、Sassで使用されるファイルの分割やインポートについて学びます。 「CSSを効率的に書く！Sassの入門講座」の第５章です。この講座については以下から…

次のチャプター

Sass/SCSS入門講座 ７章 関数を理解する チャプター7では、Sassで使用される関数について解説します。 「CSSを効率的に書く！Sassの入門講座」の第7章です。この講座については以下から確認できます。 【関数と…