CSS:用SASS(SCSS)实现栅格系统 – 幸福框架

背景

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

收集的资料

按照官网的教程尝试一遍就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);

运行效果

备注

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

 

本文链接:http://www.cnblogs.com/happyframework/p/3219526.html,转载请注明。



You must enable javascript to see captcha here!

Copyright © All Rights Reserved · Green Hope Theme by Sivan & schiy · Proudly powered by WordPress

无觅相关文章插件,快速提升流量