Skip to content

Instantly share code, notes, and snippets.

@sawadays0118
Last active August 29, 2015 14:11
Show Gist options
  • Save sawadays0118/14d92dc78026d430195e to your computer and use it in GitHub Desktop.
Save sawadays0118/14d92dc78026d430195e to your computer and use it in GitHub Desktop.
【Sass】固定と可変どちらもいける簡単グリッドシステム【Mixin】 ref: http://qiita.com/sawadays0118/items/8dccaf00a7452ee41295
.easyGrid { *zoom: 1; width: 102.9703%; margin-left: -2.9703%; }
.easyGrid:before, .easyGrid:after { content: ""; display: table; }
.easyGrid:after { clear: both; }
.easyGrid > * { float: left; width: 13.66337%; margin-left: 2.9703%; }
.easyGrid > *.gridCol02 { width: 30.29703%; }
.easyGrid > *.gridCol03 { width: 46.93069%; }
.easyGrid > *.gridCol04 { width: 63.56436%; }
.easyGrid > *.gridCol05 { width: 80.19802%; }
.easyGrid > *.gridCol06 { width: 96.83168%; }
.easyGrid > *:first-child + * + * + * + * + * ~ * { margin-top: 20px; }
.easyGrid {
@include grid-type-float(20px,30px,138px,6,3,980px);
}
// * Responsive Grid System float & box-sizing (IE7 and above. Without box-sizing)
// * If set $parentWidth Responsive Mode
@mixin grid-type-float($mat, $mal, $width, $col, $firstLineCol, $parentWidth:0) {
$mat: 20px !default;
$mal: 20px !default;
$width: 200px !default;
$col: 4 !default;
$firstLineCol: #{$col} !default;
@include clearfix;
@if $parentWidth == 0 {
width: $mal * $col + $width * $col;
margin-left: 0 - $mal;
}
@else {
$mal: nounit($mal);
$width: nounit($width);
$parentWidth:nounit($parentWidth) + $mal;
width: 100% + percentage($mal / $parentWidth);
margin-left: 0 - percentage($mal / $parentWidth);
}
& > * {
@if $legacy-support-for-ie6 or $legacy-support-for-ie7 {
} @else {
@include box-sizing(border-box);
}
float: left;
@if $parentWidth == 0 {
width: $width;
margin-left: $mal;
} @else {
width: percentage($width / $parentWidth);
margin-left: percentage($mal / $parentWidth);
}
@for $i from 2 through $col {
&.gridCol#{zeropadding($i,2)} {
@if $parentWidth == 0 {
width: ($mal * $i - 1) + $width * $i;
}
@else {
width: percentage($mal / $parentWidth) * ($i - 1) + percentage($width / $parentWidth) * $i;
}
}
}
@if $col - ($col - $firstLineCol) == 1 {
&:first-child ~ * {
margin-top: $mat;
}
}
@if $col - ($col - $firstLineCol) == 2 {
&:first-child + * ~ * {
margin-top: $mat;
}
}
@if $col - ($col - $firstLineCol) == 3 {
&:first-child + * + * ~ * {
margin-top: $mat;
}
}
@if $col - ($col - $firstLineCol) == 4 {
&:first-child + * + * + * ~ * {
margin-top: $mat;
}
}
@if $col - ($col - $firstLineCol) == 5 {
&:first-child + * + * + * + * ~ * {
margin-top: $mat;
}
}
@if $col - ($col - $firstLineCol) == 6 {
&:first-child + * + * + * + * + * ~ * {
margin-top: $mat;
}
}
@if $col - ($col - $firstLineCol) == 7 {
&:first-child + * + * + * + * + * + * ~ * {
margin-top: $mat;
}
}
@if $col - ($col - $firstLineCol) == 8 {
&:first-child + * + * + * + * + * + * + * ~ * {
margin-top: $mat;
}
}
}
}
<ul class="easyGrid">
<li>テキストテキスト</li>
<li class="gridCol02">テキストテキスト</li>
<li class="gridCol03">テキストテキスト</li>
<li class="gridCol02">テキストテキスト</li>
<li class="gridCol04">テキストテキスト</li>
</ul>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment