CSS：用SASS（SCSS）实现栅格系统

背景

在CSS：用Less实现栅格系统中我介绍了如何用LESS实现栅格系统，为啥还要再用SASS做一遍呢？Bootstrap+JQuery+Less做前端（以读取为目的），ExtJs+Sass做后台（以写为目的），学会了Sass让我可以自定义ExtJs的主题。

收集的资料

• SASS官网：http://sass-lang.com/。

按照官网的教程尝试一遍就OK了。

注意事项

• Ruby对中文目录的支持不好，项目不要放到中文目录下。
• 重点学校Sass的这个几个概念：变量、嵌条、惨入和流程控制。

栅格实战

 $span_length: 12;

 /*固定栅格系统*/

 /*栅格的左边距*/
 $span_margin: 20px;
 /*栅格的的宽度*/
 $span_width: 60px;
 /*栅格数量*/

 .row
 {
     margin-left: -$span_margin;/*抵消第一个栅格的左边距*/
     min-height:1px;
 }

 .row [class*="span"]
 {
     float: left;
     min-height:1px;
     margin-left: $span_margin;
 }

 @mixin span ($length)
 {
     @for $index from 1 through $length
     {
         .row .span#{$index}
         {
             width: $index * $span_width + ($index - 1) * $span_margin;
         }
     }
 }

 @mixin offset ($length)
 {
     @for $index from 1 through $length
     {
         .row .offset#{$index}
         {
             margin-left: $index * $span_width + ($index + 1) * $span_margin;
         }
     }
 }

 @include span($span_length);
 @include offset($span_length);

 /*自动栅格系统*/

 /*栅格的宽度和左边距之比*/
 $span_width_margin_scale: 3;
 /*栅格的左边距比例*/
 $span_margin_percentage: (1 / ($span_length * ($span_width_margin_scale + 1) - 1));

 .row-fluid
 {
     width: 100%;
     min-height:1px;
 }

 .row-fluid [class*="span"]:first-child
 {
     margin-left:;
 }

 .row-fluid [class*="span"]
 {
     float: left;
     min-height: 1px;
     margin-left: percentage($span_margin_percentage);
 }

 @mixin fluid_span ($length)
 {
     @for $index from 1 through $length
     {
         .row-fluid .span#{$index}
         {
             width: percentage(($index * ($span_width_margin_scale + 1) - 1) * $span_margin_percentage);
         }
     }
 }

 @mixin fluid_offset ($length)
 {
     @for $index from 1 through $length
     {
         .row-fluid .offset#{$index}
         {
             margin-left: percentage(($index * ($span_width_margin_scale + 1) + 1) * $span_margin_percentage);
         }
     }
 }

 @include fluid_span($span_length);
 @include fluid_offset($span_length);

运行效果

备注

真是仰慕这些工具的作者！