Sass のfor文でwidthやmargin、paddingの設定を一気に書き出す方法

この記事は約2分11秒で読めます

widthやmargin、paddingの設定で、10%、15%、20%など、5刻みや10刻みで大量に書くことがありますよね。
そんなときはこれです。

下記のように書きます。

  table.std {
@for $value from 1 through 20{
.width_#{$value * 5}  {
width:5% * $value;
}

すると一気に、下記のものが書き出されます。非常に便利です。

  table.std .width_5 {
    width: 5%; }
  table.std .width_10 {
    width: 10%; }
  table.std .width_15 {
    width: 15%; }
  table.std .width_20 {
    width: 20%; }
  table.std .width_25 {
    width: 25%; }
  table.std .width_30 {
    width: 30%; }
  table.std .width_35 {
    width: 35%; }
  table.std .width_40 {
    width: 40%; }
  table.std .width_45 {
    width: 45%; }
  table.std .width_50 {
    width: 50%; }
  table.std .width_55 {
    width: 55%; }
  table.std .width_60 {
    width: 60%; }
  table.std .width_65 {
    width: 65%; }
  table.std .width_70 {
    width: 70%; }
  table.std .width_75 {
    width: 75%; }
  table.std .width_80 {
    width: 80%; }
  table.std .width_85 {
    width: 85%; }
  table.std .width_90 {
    width: 90%; }
  table.std .width_95 {
    width: 95%; }
  table.std .width_100 {
    width: 100%; }

記事カテゴリー: WEB