学习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有着一样的缩进式风格
- .scss
- 从第三代开始,保留缩进式风格,完全向下兼容普通的css代码
什么是 Compass
Compass是Sass的工具库,详情请点击这里
- Sass与Compass
- Sass与Compass的关系,类似于JavaScript和JQuery的关系.
- Sass与Compass能做什么?
- Sass与Compass的安装
- 国内需要*
- 没钱*的可以使用淘宝的镜像,改变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-x64\lib\ruby\gems\2.2.0\gems\sass-3.4.20\lib\sass\engine.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. width: 100px; 6. height: 100px; 7. #{$bgc}: $color; 8.} 9.// 生成的css 10..container { width: 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-width: 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. width: 1000px; 22. } 23. } 24. } 25. } 26. @media(max-width: 1000px) { 27. // 默认是跳出 rule 28. @at-root .container{ // 对应行号28 29. height: 1000px; 30. } 31. // 下面这句跳出media 32. @at-root(without: media rule) { 33. .container { // 对应行号33 34. width: 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 { width: 1000px; } 53. 54.@media (max-width: 1000px) { /* line 28, ../sass/demo2.scss */ 55. .container { height: 1000px; } } 56./* line 33, ../sass/demo2.scss */ 57..container { width: 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 {width: 100px;} // 将media写在这里将会出错 3.@media screen and (min-width:320px) and (max-width:639px){ 4. .three1 {width: 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; }