Sass:
定义:css预处理器定义了一种新的语言,其基本思想是,用一种专门的编程语言,为css增加了一些编程的特性,将css作为目标生成文件,然后开发者就只要使用这种语言进行编码工作。(采用RuBy语言编写的一款css预处理语言)
扩展名:.sass(严格的缩进式语法) .scss(与平时css语法书写类似) scss和css写法无差别,这也是Sass后来越来越受大众喜欢原因之一。
Sass编译
方法:
- 命令编译(我喜欢)
- GUI工具编译
- 自动化编译(Grunt和Gulp)
命令编译:
单文件编译
sass(要编译的Sass文件路径)/style.scss:(要输出css文件路径)/style.css
多文件编译
sass sass/:css/
上面的命令表示将项目中的"sass"文件夹中所有".scss"(".sass")文件编译成".css"文件,并且将这些css文件都放在项目"css"文件夹中。
开启”watch”功能,这样只要你的代码进行任何修改,都能自动监测到代码的变化,并且给你直接编译出来:
sass --watch (要编译的Sass文件路径)/style.scss:(要输出css文件路径)/style.css
Sass常见的编译错误
- 字符编码引起的(不支持”GBK”编码,设置为”UTF-8”)
- 路径中的中文字符(不要使用中文字符命名文件目录名)
不同样式风格的输出方法:
1.嵌套输出方式 nested
2.展开输出方式 expanded 命令行最后加 -- style expanded
3.紧凑输出方式 compact
4.压缩输出方式 compressed
Sass普通变量与默认变量
普通变量:定义之后可以在全局范围内使用。
默认变量:sass的默认变量仅需要在值后面加上!default即可。
(Sass的默认变量一般是用来设置默认值,然后根据需求来覆盖的,只需要在默认变量之前重新声明下变量即可。)默认变量的价值在进行组件化开发的时候会非常有用。