2 flat logo on transparent 256
2018-01-22

Sassのfor文を使って、ちょっとしたデザイン修正を便利に行う

Ot1c850 min

Sassにはfor文も設定されており、これを利用してサイズなどのちょっとしたデザイン修正に
利用することができます。
まずはコードをご覧ください

SassのFor文でサイズを調整する

Sass

@for $i from 10 through 20 {
  .h-#{$i} {
   height: $i * 5px;
  }
}

view

slim

div
  div.h-20
  div.h-10

CSS出力内容

h-20 {height:20px;}
h-10 {height:10px;}

上記の様にフロントのviewで.h-20や.h-1を指定すると
height:1px;~20pxの間のスタイルシートが出力されます。

例えばカテゴリー一覧とサイト一覧があり、共通のCSSで
CSSを変更する量ではないが、微妙なサイズの調整が必要な場合などに
利用できます。

下記のように0から150pxの範囲で、5px刻みでheightを指定できます

Sass

@for $i from 0 through 20 {
  .h-#{$i * 5} {
    height: $i * 5px;
  }
}

CSS出力内容

.h-5  {height:5px;}
.h-10 {height:10px;}
.h-100 {height:100px;}
前の記事
次の記事