クラス名に任意の数字を記入し、プロパティの値として扱う[HTML.CSS] #HTML

cssのクラス名に任意の数字を指定し、その値をプロパティとして扱います。
レイアウトを組む際に、例外の意図的な余白がある。
コンポーネント一覧ページなど、実装するページでは無いが見通しを良くしたい時などに便利。

DOMが汚れてしまうのと、データが入っていないDOMを記述することは善とされていないので邪道な方法になってしまうが、コンポーネント指向を取り入れているとどうしてもここだけ・・・といったことがあるので。

style.scss

@for $i from 1 through 200 {
    .clearance_#{$i * 1} {
        width:#{$i * 1}px !important;
        height:#{$i * 1}px !important;
    }
}

index.html

<div class="clearance_100"></div>

注意点

レスポンシブの際に余白が不要になる。または余白のサイズが変わる時は扱いが不便になるので、PC,SPで切り分けるクラスを入れておくのが良い。

index.html

<div class="clearance_100　pc"></div>
<div class="clearance_50　sp"></div>

ご意見、ご連絡ありましたらぜひ、Twitterにお気軽にご連絡ください！
https://twitter.com/RinstarskyKujat