トップへ戻る
BLOGS

SCSS でループ処理をする(for,each)

SCSS でループ処理をする(for,each)

はい 今回はSCSSの基礎編ということで

SCSSのループ処理、更に少しづつでもSCSSの関数を紹介して行きます

試験用のHTMLはこちら、

<ul class="boxes">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>

なんてこと無い普通にliがたくさん並べただけです

ではこのliに対して順番になにか処理をしていきます。

.boxes {
  li {
    $startColor: orange;
    width: 100px;
    height: 100px;
    background-color: $startColor;
    border: 1px solid #000;
    list-style: none;
  }
}

これを基礎としてfor文で変化させます

@for $i from 2 through 5 {
      &:nth-of-type(#{$i}) {
        transform: translateX(($i - 1) * 20px);
        background-color:adjust-hue($startColor,($i - 1) * 45deg);
      }
    }

@for $i from 2 through 5で変数$iという数字を2〜5まで繰り返すという書き方です

もしくはfrom 2 to 5と記述します

&:nth-of-type(#{$i})そして変数をCSSのセレクターの中で使用する場合は

#{$i}のように#{}で囲って記述します。

adjust-hue()はSCSSの組み込み関数で色相を回転させる関数です

これにより段々と箱がズレながら色が変わっていくという書き方が出来ました。

他にも

@for $k from 2 through 10 {
      &:nth-of-type(#{$k}) {
        background-color: darken(#eee, 5% * $k);
        @if $k % 2 == 0 {
          transform: translateY($k * 10px);
        } @else {
          transform: translateY($k * -10px);
        }
      }

組み込み関数darkenを使用し段々と色が黒くなる関数を使った例で

さらに@if $k % 2 == 0で偶数箇所のみ別の変更を加えるということをしています。

他の応用例としてアニメーションもしてみましょう

@keyframes fadein {
  0% {
    transform: translateY(30px);
    opacity: 0;
  }
}

段々と出てくるようなアニメーションを書いておきます

 @for $j from 1 through 5 {
      &:nth-of-type(#{$j}) {
        animation-delay: .2s * $j;
        &::before {
          content: '#{$j}';
          font-size: 20px;
        }
      }
    }

nth-of-type(#{$j})で順番になっている要素に対してanimation-delay: .2s * $j;で段々とスタートを遅らせる処理を書いていきます

また::beforeを作っていて、中身を連番で出しています。

SCSSはこの様に繰り返す処理は楽に書けそうですね。

また他にもこれらをうまく活かす方法がないか考えておくことにしましょう

コメントをお待ちしております

お気軽にコメントをどうぞ。

CAPTCHA