SCSSの基本構文3 - if文とfor文

Webサイト制作

SCSS

基礎

投稿日時 : 2024/11/26 更新日時 : -

前のページに続きSCSSでプログラミングに関する事をこの記事でも紹介する。僕自身の考えとしてはSCSSで保守性の観点から見てfor文やif文を乱用するようなコードは書くべきではない。for文は多少使えるが条件式のif文は後々になってコードを読む際に修正が大変になる可能性が高い。

if文を使わない設計にするべきだ。プログラミングには使わない方がよい関数や機能が時々あるので可読性や保守性の事を考えてコードを書くべきだと考える。この記事はスクリプトが書ける人が豆知識として知る程度でよい。

SCSSのif文 - 条件式について

JavaScriptに慣れている方なら問題なく分かるだろう。


$color: 1;
.switch_color {
  @if $color == 0 {
    color: blue;
  }
  @else if $color == 1 {
    color: red;
  }
  @else {
    color: green;
  }
}
<body>
<div class="switch_color">スイッチカラー</div>
</body>

スイッチカラー

$colorの値が1なのでcolor: redが適用されているな。条件式に( )が使われていない事に注意だ。

SCSSのfor文 - ループ文について

for文は結構使えたりする。下記のコードを見てほしいが、注意しなければならない点が2つある。


$size: 12px;
@for $i from 1 through 5 {
  .fs-#{$i} {
    font-size: $size + ($i * 1.5);
  }
}

まず、「.fs-#{$i}」と訳の分からぬコードがあるが、これはインターポレーション(補間)と呼ぶらしい。意味は文字列の中に数式などを展開して使う為のものだ。その為に「#{}」が必要だ。

また、$sizeは12pxとサイズの単位が付いているのにそのまま数値として計算で使えている事も分かるだろうか。実際に出力されるCSSのコードは下記だ。


.fs-1 { font-size: 13.5px; }
.fs-2 { font-size: 15px; }
.fs-3 { font-size: 16.5px; }
.fs-4 { font-size: 18px; }
.fs-5 { font-size: 19.5px; }

1.5pxずつフォントサイズが増してる事が確認できるな。もっと良い書き方があるかもしれないので、使う際はセンスが良い人だと更にいろんな事ができそうだ