compassで繰り返し処理をする。 | 電網覚書

本記事のソースコードの利用によって生じた損害について、当方は一切の責任を負いません。ご自身の判断と責任のもとで参照・ご利用ください。

この記事は最終更新から3年以上経過しています。

最近はsassでcssをコーディングしています。今回カラムレイアウト用のcssを組む必要があったのですが、sassの繰り返し文を使ったら面倒な作業も割りと簡単に出来たので、備忘録として残しておこうと思います。グリッドデザインをする際にはこのサイトが便利かもしれません。

自分用メモ

サイトの幅は978px。幅が26pxでマージン（右）が30pxのカラムを18カラムを作るためのscssはこんな感じ。

$default-grid-width: 26px;
  $default-grid-margin: 30px;
  
  //for文で18回繰り返し変数$iに値を入れています
  @for $i from 1 through 18 {  
    
          //grid+カラム数でcss出力されるようにしています
          .grid#{$i}, {
      float: left;
      display: inline;
      //widthのデフォルト値26pxに変数$iの数字を掛けたものと、マージンのデフォルト値30pxに変数$iから1引いた値を掛けたものを足す。
      width:$default-grid-width * $i + $default-grid-margin * ($i - 1);
      padding: 0;
                  margin-right: $default-grid-margin;
      background:#87ceeb;
    }
  }

コンパイルするとこんなようなcssが出来上がっています。

/* line 88, ../sass/style.scss */
.grid1 {
  float: left;
  display: inline;
  padding: 0;
  margin-right: 30px;
  width: 26px;
  background: #87ceeb;
}

/* line 88, ../sass/style.scss */
.grid2 {
  float: left;
  display: inline;
  padding: 0;
  margin-right: 30px;
  width: 82px;
  background: #87ceeb;
}

/* line 88, ../sass/style.scss */
.grid3 {
  float: left;
  display: inline;
  padding: 0;
  margin-right: 30px;
  width: 138px;
  background: #87ceeb;
}

【中略】

/* line 88, ../sass/style.scss */
.grid17 {
  float: left;
  display: inline;
  padding: 0;
  margin-right: 30px;
  width: 922px;
  background: #87ceeb;
}

/* line 88, ../sass/style.scss */
.grid18 {
  float: left;
  display: inline;
  padding: 0;
  margin-right: 30px;
  width: 978px;
  background: #87ceeb;
}

数行書けばいいだけなのでらくちんですね。