doctype html
html
head
title SCSS自製RWD Grid Systm
link(href='grid.css', rel='stylesheet')
style.
body{
margin:0;
padding:0;
}
#header{
background:#333;
color:#fff;
height:100px;
line-height:100px;
font-size:48px;
}
#footer{
background:#333;
color:#fff;
height:50px;
line-height:50px;
font-size:15px;
}
#content{
background:#9BE1F3;
padding:10px;
}
#sidebar{
background:#F3466D;
padding:10px;
}
body
#header
.container
|梅strap
#main
.container
.row
#content.col-md-8
|內容
#sidebar.col-md-4
|側邊欄
#footer
.container
|版尾
View Compiled
$sm:768px;
$md:992px;
$lg:1200px;
$col:100%/12;
$col12:$col *12;
$col11:$col *11;
$col10:$col *10;
$col9:$col *9;
$col8:$col *8;
$col7:$col *7;
$col6:$col *6;
$col5:$col *5;
$col4:$col *4;
$col3:$col *3;
$col2:$col *2;
$col1:$col *1;
@mixin borderbox(){
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
* {
@include borderbox();
&:before {
@include borderbox();
}
&:after {
@include borderbox();
}
}
.row{
width: 100%;
}
.container{
width:100%;
margin: 0 auto;
overflow: hidden;
@media (min-width: $sm){
width: 750px;
margin: 0 auto;
overflow: hidden;
}
@media (min-width: $md){
width: 970px;
margin: 0 auto;
overflow: hidden;
}
@media (min-width: $lg){
width: 1170px;
margin: 0 auto;
overflow: hidden;
}
}
@mixin grid-col($size,$pre:y){
.col-#{$size}-12,
.col-#{$size}-11,
.col-#{$size}-10,
.col-#{$size}-9,
.col-#{$size}-8,
.col-#{$size}-7,
.col-#{$size}-6,
.col-#{$size}-5,
.col-#{$size}-4,
.col-#{$size}-3,
.col-#{$size}-2,
.col-#{$size}-1{
float:left;
}
.col-#{$size}-12{
@if $pre == "y"{
width:100%;
}@else{
width: $col12;
}
}
.col-#{$size}-11{
@if $pre == "y"{
width:100%;
}@else{
width: $col11;
}
}
.col-#{$size}-10{
@if $pre == "y"{
width:100%;
}@else{
width: $col10;
}
}
.col-#{$size}-9{
@if $pre == "y"{
width:100%;
}@else{
width: $col9;
}
}
.col-#{$size}-8{
@if $pre == "y"{
width:100%;
}@else{
width: $col8;
}
}
.col-#{$size}-7{
@if $pre == "y"{
width:100%;
}@else{
width: $col7;
}
}
.col-#{$size}-6{
@if $pre == "y"{
width:100%;
}@else{
width: $col6;
}
}
.col-#{$size}-5{
@if $pre == "y"{
width:100%;
}@else{
width: $col5;
}
}
.col-#{$size}-4{
@if $pre == "y"{
width:100%;
}@else{
width: $col4;
}
}
.col-#{$size}-3{
@if $pre == "y"{
width:100%;
}@else{
width: $col3;
}
}
.col-#{$size}-2{
@if $pre == "y"{
width:100%;
}@else{
width: $col2;
}
}
.col-#{$size}-1{
@if $pre == "y"{
width:100%;
}@else{
width: $col1;
}
}
}
@include grid-col(sm);
@include grid-col(md);
@include grid-col(lg);
@media (min-width:$sm){
@include grid-col(sm,n);
}
@media (min-width:$md){
@include grid-col(md,n);
}
@media (min-width:$lg){
@include grid-col(lg,n);
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.