2 flat logo on transparent 256
2018-01-22

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

Ot1c850 min

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

まずは下記コードをご覧ください

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

fromは開始値でthroughは終了値です。

height: $i * 5px;は5px単位で区切ります。

Sass

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

view

slim

div
  div.h-10
  div.h-20

CSS出力内容

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

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

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

クラス単位でmixin, extendなど便利な機能もあります

Sassの@extendと@mixinを解説

また別のSassファイルを丸ごとインクルードできます。

Ruby On RailsでSassのColor管理用ファイルを作っておくとかなり便利

前の記事
次の記事