CSS：用SASS（SCSS）实现栅格系统
背景
在CSS：用Less实现栅格系统中我介绍了如何用LESS实现栅格系统，为啥还要再用SASS做一遍呢？Bootstrap+JQuery+Less做前端（以读取为目的），ExtJs+Sass做后台（以写为目的），学会了Sass让我可以自定义ExtJs的主题。
收集的资料
- SASS官网：http://sass-lang.com/。
按照官网的教程尝试一遍就OK了。
注意事项
- Ruby对中文目录的支持不好，项目不要放到中文目录下。
- 重点学校Sass的这个几个概念：变量、嵌条、惨入和流程控制。
栅格实战
1 $span_length: 12; 2 3 4 5 /*固定栅格系统*/ 6 7 /*栅格的左边距*/ 8 $span_margin: 20px; 9 /*栅格的的宽度*/ 10 $span_width: 60px; 11 /*栅格数量*/ 12 13 .row 14 { 15 margin-left: -$span_margin;/*抵消第一个栅格的左边距*/ 16 min-height:1px; 17 } 18 19 .row [class*="span"] 20 { 21 float: left; 22 min-height:1px; 23 margin-left: $span_margin; 24 } 25 26 @mixin span ($length) 27 { 28 @for $index from 1 through $length 29 { 30 .row .span#{$index} 31 { 32 width: $index * $span_width + ($index - 1) * $span_margin; 33 } 34 } 35 } 36 37 @mixin offset ($length) 38 { 39 @for $index from 1 through $length 40 { 41 .row .offset#{$index} 42 { 43 margin-left: $index * $span_width + ($index + 1) * $span_margin; 44 } 45 } 46 } 47 48 @include span($span_length); 49 @include offset($span_length); 50 51 52 53 /*自动栅格系统*/ 54 55 /*栅格的宽度和左边距之比*/ 56 $span_width_margin_scale: 3; 57 /*栅格的左边距比例*/ 58 $span_margin_percentage: (1 / ($span_length * ($span_width_margin_scale + 1) - 1)); 59 60 .row-fluid 61 { 62 width: 100%; 63 min-height:1px; 64 } 65 66 .row-fluid [class*="span"]:first-child 67 { 68 margin-left: 0; 69 } 70 71 .row-fluid [class*="span"] 72 { 73 float: left; 74 min-height: 1px; 75 margin-left: percentage($span_margin_percentage); 76 } 77 78 @mixin fluid_span ($length) 79 { 80 @for $index from 1 through $length 81 { 82 .row-fluid .span#{$index} 83 { 84 width: percentage(($index * ($span_width_margin_scale + 1) - 1) * $span_margin_percentage); 85 } 86 } 87 } 88 89 @mixin fluid_offset ($length) 90 { 91 @for $index from 1 through $length 92 { 93 .row-fluid .offset#{$index} 94 { 95 margin-left: percentage(($index * ($span_width_margin_scale + 1) + 1) * $span_margin_percentage); 96 } 97 } 98 } 99 100 101 @include fluid_span($span_length); 102 @include fluid_offset($span_length);
运行效果
备注
真是仰慕这些工具的作者！
