源码链接：http://pan.baidu.com/s/1o8M51hC
Sass
学习Sass之前,应该要知道css预处理器这个东西,css预处理器是什么呢?
Css预处理器定义了一种新的语言将Css作为目标生成文件，然后开发者就只要使用这种语言进行编码工作了。预处理器通常可以实现浏览器兼容，变量，结构体等功能，代码更加简洁易于维护。
那么css预处理器与Sass有什么关系呢,Sass就是属于css预处理器中的一种,还有两款他们分别是Less和 Stylus,这里就不做过多的介绍了.
什么是Sass
sass是一种css的开发工具,提供了很多便利的写法,不但使css开发变得简单和可维护,而且还大大节省了开发时间.
Sass与Css
css算不上一门真正的编程语言,无法完成嵌套,继承,设置变量等工作.
Sass是对css进行预处理的“中间语言”,为了弥补css的不足
.scss和.sass
.sass
最初它是为了配合haml而设计，所以和haml有着一样的缩进式风格
（Haml是一种用来描述任何XHTML web document的标记语言， 它是干净，简单的。而且也不用内嵌代码。Haml的职能就是替代那些内嵌代码的page page templating systems，比如PHP,ERB(Rails的模板系统)，ASP。不过，haml避免了直接coding XHTML到模板，因为它实际上是一个xhtml的抽象描述，内部使用一些code来生成动态内容。Haml 是一种简洁优美的模板语言，可以应用于Ruby on Rails、 PHP等Web开发平台，可以大大缩减模板代码，减少冗余，提高可读性。并且Haml是一种完备的模板语言，没有牺牲当前模板语言的任何特性。Haml由 Hampton Catlin发明并且开发了Ruby on Rails上的实现。）
.scss
从第三代开始，保留缩进式风格，完全向下兼容普通的css代码
什么是 Compass
Compass是Sass的工具库,详情请点击这里
Sass与Compass
Sass与Compass的关系,类似于JavaScript和JQuery的关系.
Sass与Compass能做什么?
Sass与Compass的安装
国内需要FQ
没钱FQ的可以使用淘宝的镜像,改变source 就可以了
$ gem sources --add https://ruby.taobao.org/ --remove https://rubygems.org/
执行命令 gem install compass 来安装compass,安装compass的时候,也会把sass一起装上.
执行命令compass -v 查看是否安装成功,安装成功会在控制台输出版本号.
执行命令sass -v 查看是否安装sass成功,安装成功会在控制台输出版本号.
Sass基础语法
编译scss
sass <sass file> <css file>
输出风格一共有四种
1. nested
1.body {
2. background-color: #f00; }
3.
4..person, .son {
5. height: 100px; }
6.
7./*# sourceMappingURL=demo1.css.map */
2. expanded
1./* line 1, ../sass/demo1.scss */
2.body {
3. background-color: #f00;
4.}
5.
6./* line 4, ../sass/demo1.scss */
7..person, .son, .banner {
8. height: 100px;
9.}
10.
11./* line 7, ../sass/demo1.scss */
12..son, .banner {
13. height: 100px;
14.}
15.
3.compact
1./* line 1, ../sass/demo1.scss */
2.body { background-color: #f00; }
3.
4./* line 4, ../sass/demo1.scss */
5..person, .son, .banner { height: 100px; }
6.
7./* line 7, ../sass/demo1.scss */
8..son, .banner { height: 100px; }
9.
4.compressed
主要用于生产线
1.body{background-color:red}.person,.son,.banner{height:100px}.son,.banner{height:100px}
利用sass命令来监视文件和文件夹
监视Sass文件:
sass --watch <sass file>:<css file>
监视文件夹
sass --watch <sass folder>:<css folder>
使用compass编译sass
创建compass目录执行compass create folderName
查看创建好的目录结构可以看出,该命令共创建了两个文件夹,
分别是sass和stylesheets,这两个文件夹前者是用来放sass文件,后者则是用来存储编译好的css文件.
只需要把相关的scss放进sass文件夹内,执行compass compile命令就可以编译了,编译好的文件会自动放在stylesheets文件夹内
监视文件夹
执行命令compass watch
如果加上后缀–force的话表示不管文件更改还是不更改都会重新编译文件
compass watch --force
设置中文不报错
路径根据自己的安装ruby的目录来进行寻找,每个人电脑都不一样
C:Ruby22-x64lib
ubygems2.2.0gemssass-3.4.20libsassengine.rb
添加如下代码Encoding.default_external = Encoding.find('utf-8')
Sass Start
1.sass使用块级作用域
2.变量分为局部变量和全局变量
如果在一个块级作用域里面声明一个变量,要在另一个块级作用域使用的话必须加上!global,否则如果在另一个块级作用域使用此变量会报错.
1.// scss
2.body {
3. /*$color: red;
4. color: $color; 局部变量,下面访问不到, 所以编译会报错,如果想要下面能够访问到的话. 只需要后面加上!global就可以了*/
5. $color: red !global; /*这样就可以吧局部变量变为全局变量*/
6. color: $color;
7.}
8.
9.footer {
10. color: $color;// 这里也不会报错
11.}
3.变量默认值
在变量后面,分号前面加上!default
作用: 如果首先定义了一个变量$color: red,那么第二次继续赋值为$color: green,此时$color的值为green, 如果第二次赋值的时候在变量后面加上一个!default标识的话,就不会覆盖上次的赋值.这说明,加上!default标识的语句会被优先编译和赋值.
下面代码是没有加default
1.// scss
2.$fontSize: 12px;
3.$fontSize: 16px;
4..one {
5. font-size: $fontSize;
6.}
7.// 生成的css
8.body { color: red; }
9.footer { color: red; }
10..one { font-size: 16px; }
下面代码加上了!default
1.// scss
2.$fontSize: 12px;
3.$fontSize: 16px !default;
4..one {
5. font-size: $fontSize;
6.}
7.// 生成的css
8.body { color: red; }
9.footer { color: red; }
10..one { font-size: 12px; }
11.
4. 多值变量
4.1 nth: 语法nth(variable,index);
需要注意的是它的索引是从1开始的
1.// scss
2.$color: red;
3.$maps: (borderColor: red, backgroundColor: blue);
4.$paddings: 10px 20px 30px 40px;
5.$padding1: 3px 20px 30px 40px;
6.body {
7. color: $color;
8.}
9.
10.footer {
11. color: $color;
12. padding: $paddings;
13. padding-left: nth($padding1,1);
14.}
15.
16.// 生成的css
17.
18.body { color: red; }
19.footer { color: red; padding: 10px 20px 30px 40px; padding-left: 3px; }
4.2 map-get: 语法map-get(variable, key)
variable语法$maps: (borderColor: red, backgroundColor: blue);
有两点需要注意一下
当variable错误的时候,会报错
当key不存在的时候,不会编译这条语句,也就是说这条css不会编译出来
1.// scss
2.$color: red;
3.$paddings: 10px 20px 30px 40px;
4.$padding1: 3px 20px 30px 40px;
5.$maps: (borderColor: red, backgroundColor: blue);
6.body {
7. color: $color;
8.}
9.
10.footer {
11. color: $color;
12. padding: $paddings;
13. padding-left: nth($padding1,1);
14. border-color: map-get($maps, borderColor);
15. background-color: map-get($maps, backgroundColor);
16.}
17.
18.// 生成的css
19.body { color: red; }
20.footer { color: red; padding: 10px 20px 30px 40px; padding-left: 3px; border-color: red; background-color: blue; }
5. 变量的特殊用法
5.1 变量用在属性或者选择器上
当变量当做 属性来使用的时候#{变量名}
当变量当做 类名来使用的时候’.#{变量名}{}’
1.// scss
2.$className: container; // 变量的特殊用法
3.$bgc: background-color;
4..#{$className} {
5. 100px;
6. height: 100px;
7. #{$bgc}: $color;
8.}
9.// 生成的css
10..container { 100px; height: 100px; background-color: red; }
5.2 变量的使用中横线还是下划线,都是一个变量 怎么用取决于你的爱好
1.//scss
2.$font-size: 19px;
3..font-size {
4. font-size: $font_size;
5.}
6.// 生成的css
7..font-size { font-size: 19px; }
6.样式导入
6.1 部分文件
部分文件的名称约定以下划线开头
以下划线卡头的文件名称不会被编译
6.2 导入文件
因为原生导入css的方式和sass使用的关键词一致,为了区分使用了一些约定
原生css导入
如果导入的文件名称以css结尾
如果被导入的文件的名称是一个URL地址
被导入的文件的名字是css的url()的值
以下三种情况会直接生成css,不作任何变化,会被当做原生的css导入
1.// scss
2.@import "css.css";
3.@import "http://xxx";
4.@import url(css.css);
5.// 生成的css
6.@import url(css.css);
7.@import "http://xxx";
8.@import url(css.css);
scss文件导入
1.// 这里我新建了一个文件名称叫做_part1.scss
2.
3.// _part1.scss 文件的样式
4.$fontFamily: '微软雅黑';
5..body {
6. font-family: $fontFamily;
7.}
8.
9.// 在demo1.scss中导入
10.@import "part1"; // 这样直接写,就会导入_part1.scss中的样式,这是约定.
11.
12.
13.// demo1文件生成了以下的css
14./* line 2, ../sass/_part1.scss */
15..body { font-family: "微软雅黑"; }
7.scss嵌套常用
& 相当于this
@at-root 跳出嵌套
默认的@at-root只能跳出选择器嵌套,不能跳出@media和@support
如果需要跳出这两个嵌套的话需要设置@at-root(without: media)和@at-root(without: support)
这个语法关键词有四个
all表示所有的
rule表示常规的
media表示media
support表示support,目前@support还无法广泛的使用
我们的默认的@at-root,其实就是@at-root(without: rule)
1.body {
2. a {
3. height: 100px;
4. &:hover {
5. background-color: green;
6. }
7. // 跳出常规样式,对应着下面的行号 8
8. @at-root .container {
9. height: 100px;
10. }
11. @media(min- 768px) {
12. // 跳出media和常规样式
13. @at-root(without: media rule) {
14. .container { // 这里对应下面的行号14
15. height: 100px;
16. }
17. }
18. // 下面的样式只跳出了media 没有跳出常规样式,如果需要跳出常规样式的话需要设置,rule
19. @at-root(without: media) {
20. .container { // 这里对应行号20
21. 1000px;
22. }
23. }
24. }
25. }
26. @media(max- 1000px) {
27. // 默认是跳出 rule
28. @at-root .container{ // 对应行号28
29. height: 1000px;
30. }
31. // 下面这句跳出media
32. @at-root(without: media rule) {
33. .container { // 对应行号33
34. 500px;
35. }
36. }
37. }
38.}
39.
40.
41.// css
42.@charset "UTF-8";
43./* line 2, ../sass/demo2.scss */
44.body a { height: 100px; }
45./* line 4, ../sass/demo2.scss */
46.body a:hover { background-color: green; }
47./* line 8, ../sass/demo2.scss */
48..container { height: 100px; }
49./* line 14, ../sass/demo2.scss */
50..container { height: 100px; }
51./* line 20, ../sass/demo2.scss */
52.body a .container { 1000px; }
53.
54.@media (max- 1000px) { /* line 28, ../sass/demo2.scss */
55. .container { height: 1000px; } }
56./* line 33, ../sass/demo2.scss */
57..container { 500px; }
& 和 @at-root的嵌套用法
1.// scss
2. @at-root .container {
3. color: red;
4. @at-root nav & {
5. color: blue;
6. }
7. }
8.
9.// out css
10..container { color: red; }
11.nav .container { color: blue; }
8. 继承
8.1 简单继承
使用关键字@extend selector,代码如下
1.//scss
2..alert {
3. height: 30px;
4.}
5..alert-info {
6. @extend .alert;
7. color: #D9EDF7;
8.}
9.// out css
10..alert, .alert-info { height: 30px; }
11..alert-info { color: #D9EDF7; }
8.2 多继承
同简单继承类似,语法: @extend selector1, selector2…………
1.// scss
2..alert {
3. height: 30px;
4.}
5..bgc {
6. background-color: #f5f5f5;
7.}
8..alert-info {
9. @extend .alert, .bgc;
10. color: #D9EDF7;
11.}
12.
13.// out css
14..alert, .alert-info { height: 30px; }
15..bgc, .alert-info { background-color: #f5f5f5; }
16..alert-info { color: #D9EDF7; }
8.3 链型继承
什么是链式继承呢,按照自己的理解为,假如c继承b,b继承a,那么c同时拥有b和a 的属性.这看起来像一条链条
1.// scss
2..one {
3. border: 1px solid red;
4.}
5..two {
6. @extend .one;
7. color: red;
8.}
9..three {
10. @extend .two;
11. background-color: #f5f5f5;
12.}
13.
14.// out css
15..one, .two, .three { border: 1px solid red; }
16..two, .three { color: red; }
17..three { background-color: #f5f5f5; }
8.4 继承局限性
无法继承
兄弟选择器是无法继承的(.one + .two)
包含选择器也是无法继承的(.one .two {})
多余继承
如果有hover属性,那么同样的hover属性也会被继承下来
8.5 继承交叉合并
同时继承两个选择器,但是,这两个选择器在同一条语句上面,就形成了交叉继承.
这种用法不太容易控制,应当避免这种用法
1.a span{
2. height: 100px;
3.}
4.div .container {
5. @extend a, span;
6.}
7.a span, div .container span, a div .container, div a .container, div .container .container { height: 100px; }
8.6 继承作用域
假如你在media里面定义了一个样式,那么此样式不能继承media之外的选择器.
1.// scss 这样写将会出错 ,
2.// .three1 { 100px;} // 将media写在这里将会出错
3.@media screen and (min-320px) and (max-639px){
4. .three1 { 100px;} // 写在这里下面的才可以继承
5. .container {
6. @extend .three1;
7. height: 100px;
8. }
9.}
9. 占位选择器
% 表示占位选择器, 不会生成到架构里面,只有用到它的时候才会生成
1.// scss
2.%message {height: 30px;}
3..message-danger {
4. @extend %message;
5. color: red;
6. font-size: 18px;
7. height: 30px;
8.}
9.
10.// out css
11..message-danger { height: 30px; }
12..message-danger { color: red; font-size: 18px; height: 30px; }
原文链接 http://www.cnblogs.com/songyaqi/p/5195777.html （有修改）