转自：http://www.cnblogs.com/qqloving/p/3676852.html
自从发现可编程的css语法 Sass和基于Sass的css库compass
一个给我的感觉像c# 另外一个给我的感觉像.NET Framework，一切都为了提升开发效率和降低开发大型web的门槛。
当web开发趋势迈进WebApi+Js 时代，compass和Sass 会不会成为web开发的标配？这个得实际开发检验下.
预处理
当web站点变的越来越复杂。
先是html 复杂了----》动态编程语言解决方案
js复杂了---》jq和dojo 等解决方案
css现在也变的复杂了，但是css本身没有编程的功能，所以面向css预处理的中间件出现了，想compass和Sass这种想编写程序一样编写css，然后通过预处理，处理为浏览器可以解析的css，降低了构建更加强大的web站点复杂度。
变量
变量和js、c# 里面的变量差不多，都是用来存储东西了，我这样的菜鸟写css，最头疼一次修改好多高度，颜色等等，有了变量，即使是最笨的方法，编写css也比以前快多了了
在 sass 里面变量的标识符是$,话说和jq是一样的标识符呢
例如
|
1
2
3
4
5
6
7
|
$font-stack: Helvetica, sans-serif;$primary-color: #333;
body { font: 100% $font-stack;
color: $primary-color;
} |
这样编写的sass版的css在经过compass预处理后是可以正常解析的css，而且每一行还会有行号，用于对照比较，刚开始非常担心处理前和处理后如何联系到一起，排查BUG，后来发现有行号，so 方便
|
1
2
3
4
|
body { font: 100% Helvetica, sans-serif;
color: #333;
} |
嵌套和作用域
以前写css，最蛋疼的就是 css默认规则是一行一行的，BUT css超过一屏幕，我就搞不清楚这些css 是怎么个关系。。。
现在好了 有{} 嵌套和作用域，像写程序一样写css
纳尼，作用域？上面都有了变量跟定得有作用域，不知道作用域的，百度下
sass 的嵌套 和预处理后的css 是按照html对css的继承和处理规则来的，看着比以前舒服多了
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
nav { ul {
margin: 0;
padding: 0;
list-style: none;
}
li { display: inline-block; }
a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
} |
预处理后 是这样的
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
nav ul { margin: 0;
padding: 0;
list-style: none;
}nav li { display: inline-block;
}nav a { display: block;
padding: 6px 12px;
text-decoration: none;
} |
对于作用域，官方的demo 没有解释，这个是在书里面看到的
例如
|
1
2
3
4
5
6
7
8
9
|
div{$font-stack: Helvetica, sans-serif;$primary-color: #333;
}li{$font-stack: Helvetica, sans-serif;$primary-color: #333;
} |
在不同 {} 作用域内的变量互不影响
模块
看到这个单词 Partials,真的是喜极而泣啊,以前随便打开一个css文件都是1k行以上,本菜鸟在里面看代码,就好像在迷宫里面迷路一样,
sass的模块化是将需要模块化的css放在一个以下划线开始的单独的文件里面例如_partial.scss,使用这个模块的时候用@import导入即可
不支持模块化css的css框架都是耍流氓!
Import 导入模块
在css中使用一个Import 便会像服务器端发起一个请求,在sass中使用Import,compass 可以导入一个模块,而且会合并这个导入的文件.
例如, 重置浏览器默认样式的模块
|
1
2
3
4
5
6
7
8
9
|
// _reset.scsshtml,body,ul,ol { margin: 0;
padding: 0;
} |
导入是这样导入的
|
1
2
3
4
5
6
7
8
|
/* base.scss */@import 'reset';
body { font-size: 100% Helvetica, sans-serif;
background-color: #efefef;
} |
生成的css 是浏览器可以解析的,而且带行号,方便对比
|
1
2
3
4
5
6
7
8
9
|
html, body, ul, ol { margin: 0;
padding: 0;
}body { background-color: #efefef;
font-size: 100% Helvetica, sans-serif;
} |
sass 中的函数方法--Mixins
函数 有函数名 参数 可选选参数,返回值等
在sass中 这些统统都有!具体我还在看书,这是官方的demo,足以发现mixins 是挺好用的
定义一个方法
|
1
2
3
4
5
6
|
@mixin border-radius($radius) { -webkit-border-radius: $radius;
-moz-border-radius: $radius;
-ms-border-radius: $radius;
border-radius: $radius;
} |
使用一个方法
|
1
|
.box { @include border-radius(10px); } |
可以发现用@mixin开头 后跟方法 名称 括号内为参数,{}中间为返回内容,
使用@include 后跟方法名和括号，便可以调用这个方法
compass预处理后 生成的css如下
|
1
2
3
4
5
6
|
.box { -webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
border-radius: 10px;
} |
继承
此继承为sass组织代码的继承规则，非html解析和呈现css时候的继承规则，不要搞混了。。。，虽然生成的代码符合css继承规则。。。。。。
继承 使用的关键字是@extend，使用很简单，来看一个官方的demo
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
.message { border: 1px solid #ccc;
padding: 10px;
color: #333;
}.success { @extend .message;
border-color: green;
}.error { @extend .message;
border-color: red;
}.warning { @extend .message;
border-color: yellow;
} |
预处理后生成的代码
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
.message, .success, .error, .warning { border: 1px solid #cccccc;
padding: 10px;
color: #333;
}.success { border-color: green;
}.error { border-color: red;
}.warning { border-color: yellow;
} |
操作符
sass 支持+、-、*、/、% 加减乘除和求余，是在是太劲爆了，这样在写宽度和高等等地方有更加方便了
看看官方的demo
|
1
2
3
4
5
6
7
8
9
10
11
|
.container { width: 100%; }article[role="main"] {
float: left;
width: 600px / 960px * 100%;
}aside[role="complimentary"] {
float: right;
width: 300px / 960px * 100%;
} |
预处理后的代码
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
.container { width: 100%;
}article[role="main"] {
float: left;
width: 62.5%;
}aside[role="complimentary"] {
float: right;
width: 31.25%;
} |