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);

運行效果

備註

真是仰慕這些工具的做者！