关于Sass
1.定义
Sass的学名叫“CSS预处理器”,就是在CSS的基础上,引入了变量、嵌套、mixin(混合)、运算以及函数等功能,增加了代码的灵活性,可以让我们以更少的代码实现同样的效果,而且代码的整洁度、可读性更强。
而且Sass算是CSS的超集,它100%兼容CSS的语法,所有在 CSS 中正常工作的代码也能在 SCSS 中正常工作。换个说法也就是:如果你喜欢,可以在Sass文件中完全以CSS的语法来写代码,它也是完全支持的。
大体来说,使用Sass分3步:
安装Sass;
编译Sass文件成CSS文件;
在项目中引用CSS文件的路径;
2.文件格式
Sass有两种后缀名文件:.sass和.scss。在同一个项目中,两种格式文件可以共存(不建议,最好统一为一种格式),但二者有各自的特点:
.sass后缀的文件
使用类Ruby的语法,格式为空格缩进式,没有花括号,靠换行区分不同属性,格式要求比较严格。.scss后缀的文件
是Sass3引入的新语法,基本写法与CSS大致相同,所以对于专门做前端的同学来说,.scss后缀的文件是不二选择。
有一点需要注意,虽然是CSS的超级,但如果你直接把CSS文件的后缀改为.scss,浏览器是不能识别的。这也就是“预编译”的意思,Sass文件还是需要先编译为CSS文件才能正常被浏览器识别。
Markdown
Sass中的注释有3种:
1 | //我是单行注释 |
常用基本语法
1.变量
变量是Sass中最基本的语法。凡是css属性的标准值(比如说1px或者bold)可存在的地方,都可以替换为变量。之后,如果你需要一个不同的值,只需要改变这个变量的值,则所有引用此变量的地方生成的值都会随之改变。
1 | 通过 $ 符号来定义,通过变量名称实现多处重复引用。 |
另外,变量的值也可以引用其他变量:
1 | $highlight-color: #F90; |
2.嵌套
Sass支持选择器及属性嵌套,可以避免代码的重复书写。
2.1选择器嵌套
1 | div { |
大多数情况下上面那种简单的嵌套都没问题。但如果你想要在嵌套的选择器里边应用一个类似于:hover的伪类,就需要用到 & 这个连接父选择器的标识符。
1 | div { |
2.2属性嵌套
示例1:
1 | div { |
示例2:
1 | div { |
3.代码重用之继承
sass中,选择器继承可以让选择器继承另一个选择器的所有样式,并联合声明。
1 | 使用选择器的继承,要使用关键词@extend,后面紧跟需要继承的选择器。 |
如上示例,.class2不仅会继承.class1自身的所有样式,也会继承任何跟.class1有关的组合选择器样式,如下:
1 | .class1 { |
4.代码重用之Mixin混合器
sass中使用@mixin声明混合,可以传递参数,参数名以$符号开始,多个参数以逗号分开,也可以给参数设置默认值。声明的@mixin通过@include+minxin名称来调用。
无参数mixin声明及调用:
1 | @mixin mixName { |
带参数mixin声明及调用
可以不给参数值直接写参数,如果给了值的话,就是参数的默认值,在调用的时候传入其他值就会把默认值覆盖掉。
1 | @mixin left($value: 10px) { |
带多组数值参数的mixin声明及调用
如果一个参数可以有多组值,如box-shadow、transition等,那么参数则需要在变量后加三个点表示,如$variables…。
1 | @mixin mixName($shadow...) { |
下面是一个实际应用中关于CSS3浏览器兼容的mixin使用示例:
1 | @mixin transition($transition){ |
5.颜色函数
Sass中集成了大量的颜色函数,让变换颜色更加简单直接。
1 | $box-color: red; |
其他颜色函数
1 | lighten(#cc3, 10%) // #d6d65c |
6.@import引入
CSS中原本就有不常用的@import语法,但是有两个弊端:
引入语句一定要卸载代码最前面才会生效;
影响性能。如果A文件要引入B文件,当浏览器读到A文件时会再去下载B,阻塞进程。
而Sass中的@import会在生成CSS文件时就把引入的所有文件先导入进来,也就是所有相关的样式会被编译到同一个CSS文件中,无需发起额外的请求。
当然,Sass的@import也支持导入远程的CSS文件。那效果跟普通CSS导入样式文件一样,导入的css文件不会合并到编译后的文件中,而是以@import方式存在。
一般来说基础的文件命名需要以’_’ 开头,如 _partial.scss。这种文件在导入的时候可以不写下划线及后缀,可写成@import “partial”。但是倒入CSS文件的话,就需要“文件名+后缀”了。
1 | @import ‘partial’ //导入名为“_partial.scss”的文件 |
原生的CSS导入
下列三种情况下会生成原生的CSS@import:
1.被导入文件的名字以.css结尾;
2.被导入文件的名字是一个URL地址(例如http://www.sass.hk/css/css.css ),由此可用谷歌字体API提供的相应服务;
3.被导入文件的名字是CSS的url()值。
也就是说,你不能用Sass的@import直接导入一个原始的CSS文件,因为sass会认为你想用CSS原生的@import。但是,因为sass的语法完全兼容css,所以你可以把原始的css文件改名为.scss后缀,即可直接导入了。rt方式存在。
一般来说基础的文件命名需要以’_’ 开头,如 _partial.scss。这种文件在导入的时候可以不写下划线及后缀,可写成@import “partial”。但是倒入CSS文件的话,就需要“文件名+后缀”了。
1 | @import ‘partial’ //导入名为“_partial.scss”的文件 |
原生的CSS导入
下列三种情况下会生成原生的CSS@import:
1.被导入文件的名字以.css结尾;
2.被导入文件的名字是一个URL地址(例如http://www.sass.hk/css/css.css ),由此可用谷歌字体API提供的相应服务;
3.被导入文件的名字是CSS的url()值。
也就是说,你不能用Sass的@import直接导入一个原始的CSS文件,因为sass会认为你想用CSS原生的@import。但是