Help us understand the problem. What is going on with this article?

sassの繰り返し処理を使ったクラス付与のメモ

More than 1 year has passed since last update.

コンパイル後のCSS

仕事にて、最終的に以下のようなCSSになるsassを書きたいとします。

.class0-0 {
  width: 0.0px;
}

.class0-1 {
  width: 0.1px;
}

.class0-2 {
  width: 0.2px;
}

.class0-3 {
  width: 0.3px;
}

.class0-4 {
  width: 0.4px;
}

.class0-5 {
  width: 0.5px;
}

.class0-6 {
  width: 0.6px;
}

.class0-7 {
  width: 0.7px;
}

.class0-8 {
  width: 0.8px;
}

.class0-9 {
  width: 0.9px;
}

.class1-0 {
  width: 1.0px;
}

.class1-1 {
  width: 1.1px;
}

.class1-2 {
  width: 1.2px;
}

.class1-3 {
  width: 1.3px;
}

.class1-4 {
  width: 1.4px;
}

.class1-5 {
  width: 1.5px;
}

.class1-6 {
  width: 1.6px;
}

.class1-7 {
  width: 1.7px;
}

.class1-8 {
  width: 1.8px;
}

.class1-9 {
  width: 1.9px;
}

.class2-0 {
  width: 2.0px;
}

.class2-1 {
  width: 2.1px;
}

.class2-2 {
  width: 2.2px;
}

.class2-3 {
  width: 2.3px;
}

.class2-4 {
  width: 2.4px;
}

.class2-5 {
  width: 2.5px;
}

.class2-6 {
  width: 2.6px;
}

.class2-7 {
  width: 2.7px;
}

.class2-8 {
  width: 2.8px;
}

.class2-9 {
  width: 2.9px;
}

.class3-0 {
  width: 3.0px;
}

.class3-1 {
  width: 3.1px;
}

.class3-2 {
  width: 3.2px;
}

.class3-3 {
  width: 3.3px;
}

.class3-4 {
  width: 3.4px;
}

.class3-5 {
  width: 3.5px;
}

.class3-6 {
  width: 3.6px;
}

.class3-7 {
  width: 3.7px;
}

.class3-8 {
  width: 3.8px;
}

.class3-9 {
  width: 3.9px;
}

.class4-0 {
  width: 4.0px;
}

.class4-1 {
  width: 4.1px;
}

.class4-2 {
  width: 4.2px;
}

.class4-3 {
  width: 4.3px;
}

.class4-4 {
  width: 4.4px;
}

.class4-5 {
  width: 4.5px;
}

.class4-6 {
  width: 4.6px;
}

.class4-7 {
  width: 4.7px;
}

.class4-8 {
  width: 4.8px;
}

.class4-9 {
  width: 4.9px;
}

.class5-0 {
  width: 5.0px;
}
  • classの前の数字は、0から始まり、10回繰り返したら、1増えます
  • classの後の数字は、0から9まで1づつ増えるを繰り返します

これを51回繰り返したいとします。さて、どう書きますか?先輩のコードが勉強になったので、記録しておこうと思いました。

結論

はじめに、sassから書いていきます。

@for $i from 0 through 50 {
  $v1: floor($i / 10);
  $v2: $i % 10;
  .class#{$v1}-#{$v2} {
    width: #{$v1 + "." + $v2}px;
  }
}

$v1の行の説明

$v1にくるのは、

  • 0が10回
  • 1が10回
  • 2が10回
  • 3が10回
  • 4が10回
  • 5が1回

51回の繰り返しができればOKです。

$v1: floor($i / 10);

floorは、小数点以下を切り下げます。四捨五入ではなく切り下げなので、0.9でも0とします。

  • 0.0でも1
  • 0.1でも1
  • 0.2でも1
  • 0.3でも1

・・・省略

  • 0.8でも1
  • 0.9でも1

で、0が10回を実現しています。最初の、@for $i from 0 through 50で、51回繰り返すこととしているので、5は1回だけの実行で終わります(51回目の実行なので)。

$v2の行の説明

$v2にくるのは、

  • 0 % 10 = 0
  • 1 % 10 = 1

・・・省略

  • 9 % 10 = 9
  • 10 % 10 = 0
  • 11 % 10 = 1

・・・省略

  • 41 % 10 = 1

という感じで、(0,1,2,3...9)が51回繰り返されます。

  • 0回目は(0 % 10 = 0)なので、結果は0
  • 51回目は(50 % 10 = 0)なので、結果は0

という感じになります。

試したい方へ

https://www.sassmeister.com/

ここで、sassをリアルタイムでコンパイルされますので

@for $i from 0 through 50 {
  $v1: floor($i / 10);
  $v2: $i % 10;
  .class#{$v1}-#{$v2} {
    width: #{$v1 + "." + $v2}px;
    comment: #{$i + 1}回目 // これは分かりやすくするためのコメントです
  }
}

6行目は、実際にcssとしてコンパイルする際は消しておきましょう。今回は、何回目かをしるためにつけただけです。

実際の画像↓
スクリーンショット 2018-09-17 23.47.32.png

以上です!

参考

ryosuketter
偏差値50台 大学理系院卒、一部上場企業でWebエンジニア(3年目)半人前レベル。普通の34歳おっさんでも頑張ったら一人前のフロントエンドエンジニアになれるのか?の検証 Qiita です。
https://note.com/ryosuketter
life-a-tm
人生のイベントや日常生活に密着した比較サイト、情報サイト等様々なウェブサービスを企画・開発・運営
https://life.a-tm.co.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away