Horic Design

a-blog cmsやJavaScriptなどの情報を発信しています。

stylusでグリッドシステムを自動化してみた


昨日、flexboxをつかったグリッドシステムに関する記事を書いたが、今回はそのグリッドシステムをstylusで自動生成してみました

stylus

prefix = cs_
smBreak = 768px
mdBreak = 962px
lgBreak = 1200px

makeGrid(kind)
	for row in 1 2 3 4 5 6 7 8 9 10 11 12
		.{prefix}col-{kind}-{row}
			width:(100% * row / 12)
		.{prefix}col-{kind}-order-{row}
			order:row

makeGrid(xs)

@media (min-width: smBreak)
	makeGrid(sm)
@media (min-width: mdBreak)
	makeGrid(md)

@media (min-width: lgBreak)
	makeGrid(lg)

出力されるCSS

.cs_col-xs-1 {
  width: 8.333333333333334%;
}
.cs_col-xs-order-1 {
  order: 1;
}
.cs_col-xs-2 {
  width: 16.666666666666668%;
}
.cs_col-xs-order-2 {
  order: 2;
}
.cs_col-xs-3 {
  width: 25%;
}
.cs_col-xs-order-3 {
  order: 3;
}
.cs_col-xs-4 {
  width: 33.333333333333336%;
}
.cs_col-xs-order-4 {
  order: 4;
}
.cs_col-xs-5 {
  width: 41.666666666666664%;
}
.cs_col-xs-order-5 {
  order: 5;
}
.cs_col-xs-6 {
  width: 50%;
}
.cs_col-xs-order-6 {
  order: 6;
}
.cs_col-xs-7 {
  width: 58.333333333333336%;
}
.cs_col-xs-order-7 {
  order: 7;
}
.cs_col-xs-8 {
  width: 66.66666666666667%;
}
.cs_col-xs-order-8 {
  order: 8;
}
.cs_col-xs-9 {
  width: 75%;
}
.cs_col-xs-order-9 {
  order: 9;
}
.cs_col-xs-10 {
  width: 83.33333333333333%;
}
.cs_col-xs-order-10 {
  order: 10;
}
.cs_col-xs-11 {
  width: 91.66666666666667%;
}
.cs_col-xs-order-11 {
  order: 11;
}
.cs_col-xs-12 {
  width: 100%;
}
.cs_col-xs-order-12 {
  order: 12;
}
@media (min-width: 768px) {
  .cs_col-sm-1 {
    width: 8.333333333333334%;
  }
  .cs_col-sm-order-1 {
    order: 1;
  }
  .cs_col-sm-2 {
    width: 16.666666666666668%;
  }
  .cs_col-sm-order-2 {
    order: 2;
  }
  .cs_col-sm-3 {
    width: 25%;
  }
  .cs_col-sm-order-3 {
    order: 3;
  }
  .cs_col-sm-4 {
    width: 33.333333333333336%;
  }
  .cs_col-sm-order-4 {
    order: 4;
  }
  .cs_col-sm-5 {
    width: 41.666666666666664%;
  }
  .cs_col-sm-order-5 {
    order: 5;
  }
  .cs_col-sm-6 {
    width: 50%;
  }
  .cs_col-sm-order-6 {
    order: 6;
  }
  .cs_col-sm-7 {
    width: 58.333333333333336%;
  }
  .cs_col-sm-order-7 {
    order: 7;
  }
  .cs_col-sm-8 {
    width: 66.66666666666667%;
  }
  .cs_col-sm-order-8 {
    order: 8;
  }
  .cs_col-sm-9 {
    width: 75%;
  }
  .cs_col-sm-order-9 {
    order: 9;
  }
  .cs_col-sm-10 {
    width: 83.33333333333333%;
  }
  .cs_col-sm-order-10 {
    order: 10;
  }
  .cs_col-sm-11 {
    width: 91.66666666666667%;
  }
  .cs_col-sm-order-11 {
    order: 11;
  }
  .cs_col-sm-12 {
    width: 100%;
  }
  .cs_col-sm-order-12 {
    order: 12;
  }
}
@media (min-width: 962px) {
  .cs_col-md-1 {
    width: 8.333333333333334%;
  }
  .cs_col-md-order-1 {
    order: 1;
  }
  .cs_col-md-2 {
    width: 16.666666666666668%;
  }
  .cs_col-md-order-2 {
    order: 2;
  }
  .cs_col-md-3 {
    width: 25%;
  }
  .cs_col-md-order-3 {
    order: 3;
  }
  .cs_col-md-4 {
    width: 33.333333333333336%;
  }
  .cs_col-md-order-4 {
    order: 4;
  }
  .cs_col-md-5 {
    width: 41.666666666666664%;
  }
  .cs_col-md-order-5 {
    order: 5;
  }
  .cs_col-md-6 {
    width: 50%;
  }
  .cs_col-md-order-6 {
    order: 6;
  }
  .cs_col-md-7 {
    width: 58.333333333333336%;
  }
  .cs_col-md-order-7 {
    order: 7;
  }
  .cs_col-md-8 {
    width: 66.66666666666667%;
  }
  .cs_col-md-order-8 {
    order: 8;
  }
  .cs_col-md-9 {
    width: 75%;
  }
  .cs_col-md-order-9 {
    order: 9;
  }
  .cs_col-md-10 {
    width: 83.33333333333333%;
  }
  .cs_col-md-order-10 {
    order: 10;
  }
  .cs_col-md-11 {
    width: 91.66666666666667%;
  }
  .cs_col-md-order-11 {
    order: 11;
  }
  .cs_col-md-12 {
    width: 100%;
  }
  .cs_col-md-order-12 {
    order: 12;
  }
}
@media (min-width: 1200px) {
  .cs_col-lg-1 {
    width: 8.333333333333334%;
  }
  .cs_col-lg-order-1 {
    order: 1;
  }
  .cs_col-lg-2 {
    width: 16.666666666666668%;
  }
  .cs_col-lg-order-2 {
    order: 2;
  }
  .cs_col-lg-3 {
    width: 25%;
  }
  .cs_col-lg-order-3 {
    order: 3;
  }
  .cs_col-lg-4 {
    width: 33.333333333333336%;
  }
  .cs_col-lg-order-4 {
    order: 4;
  }
  .cs_col-lg-5 {
    width: 41.666666666666664%;
  }
  .cs_col-lg-order-5 {
    order: 5;
  }
  .cs_col-lg-6 {
    width: 50%;
  }
  .cs_col-lg-order-6 {
    order: 6;
  }
  .cs_col-lg-7 {
    width: 58.333333333333336%;
  }
  .cs_col-lg-order-7 {
    order: 7;
  }
  .cs_col-lg-8 {
    width: 66.66666666666667%;
  }
  .cs_col-lg-order-8 {
    order: 8;
  }
  .cs_col-lg-9 {
    width: 75%;
  }
  .cs_col-lg-order-9 {
    order: 9;
  }
  .cs_col-lg-10 {
    width: 83.33333333333333%;
  }
  .cs_col-lg-order-10 {
    order: 10;
  }
  .cs_col-lg-11 {
    width: 91.66666666666667%;
  }
  .cs_col-lg-order-11 {
    order: 11;
  }
  .cs_col-lg-12 {
    width: 100%;
  }
  .cs_col-lg-order-12 {
    order: 12;
  }
}

たった、数行のコードで、これだけ長いCSSを出力出来るのは嬉しいですね。
もっといい書き方があれば教えてください

関連する記事



堀 悟大

有限会社アップルップル マークアップエンジニア。2014年高知大学理学部卒業。学生時代にHTML5のCanvas要素を使ってゲームを作っていたことでWeb全般に興味をもつ。アップルップル入社後はa-blog cmsを便利に使うための機能の実装や、HTML5の技術を使ったデジタルサイネージの実装を行う。趣味は英語。読むことも話すことも好き。

エントリーリスト

カテゴリーリスト

タグクラウド