Skip to content

Instantly share code, notes, and snippets.

@terkel
Created April 8, 2011 14:03
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save terkel/909897 to your computer and use it in GitHub Desktop.
Save terkel/909897 to your computer and use it in GitHub Desktop.
Sass module like YUI CSS Grids
// _grids.scss
$gridWidth: 100%;
$colGap: 0;
@mixin grid () {
display: table;
width: $gridWidth + $colGap;
@if $colGap > 0 {
margin-right: - $colGap;
}
word-spacing: -1em;
}
@mixin unit {
display: inline-block;
@if $colGap > 0 {
margin-right: $colGap;
}
word-spacing: normal;
vertical-align: top;
*display: inline;
*zoom: 1;
}
@mixin unitWidth ($colSPan, $colCount: 1) {
width: floor(($gridWidth + $colGap) / $colCount * $colSPan - $colGap);
}
/* example #1 */
// デフォルト: 列マージンなし、ユニット相対幅
.grid1 {
$gridWidth: 100%;
$colGap: 0;
@include grid();
.unit1 {
@include unit();
@include unitWidth(1, 5);
}
}
/* example #2 */
// グリッド幅と列マージンを指定 (YUI + OOCSS style?)
.grid2 {
$gridWidth: 640px;
$colGap: 20px;
@include grid();
.unit2 {
@include unit;
&.size-1 {
@include unitWidth (1, 1);
}
&.size-1-2 {
@include unitWidth (1, 2);
}
&.size-1-3 {
@include unitWidth (1, 3);
}
&.size-2-3 {
@include unitWidth (2, 3);
}
}
}
/* example #3 */
// テンプレートクラスを作って @entend
.gridTmpl {
$gridWidth: 100%;
$colGap: 0;
@include grid();
}
.unitTmpl {
@include unit();
}
.grid3 {
@extend .gridTmpl;
width: 640px;
.unit3 {
@extend .unitTmpl;
width: 320px;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment