作者:乳酪杳杳 | 来源:互联网 | 2023-05-17 18:21
“.sass”只能使用Sass老语法规则(缩进规则),”.scss”使用的是Sass的新语法规则,也就是SCSS语法规则(类似CSS语法格式)。SASS的语法中没有大
“.sass”只能使用 Sass 老语法规则(缩进规则),”.scss”使用的是 Sass 的新语法规则,也就是 SCSS 语法规则(类似 CSS 语法格式)。
SASS的语法中没有大括号,对于已经习惯于CSS的前端程序员来说显得非常别扭,因此SCSS现在更加流行。与LESS相比,SASS的功能更加强大,目前应用也非常广泛,非常值得学习。
LESS和SASS为CSS的编写带来了很多方便,不过我觉得对于维护来说,他们更加友好。
SASS编译:
● 命令编译
● GUI工具编译
● 自动化编译
命令编译
单文件编译:
sass <要编译的Sass文件路径>\style.scss:<要输出CSS文件路径>\style.css
多文件编译:
sass <要编译的Sass文件路径>:<要输出的CSS文件路径>\
在编译Sass时,开启watch功能,这样只要代码又修改,就能自动检测到代码的变化,并编译成CSS。
sass –watch <要编译的Sass文件路径>\style.scss:<要输出CSS文件路径>\style.css
GUI工具编译
GUI界面编译工具,目前较为流行的主要有:
● Koala
● Compass app
● Scout
● CodeKit
自动化编译
主要使用grunt和gulp
不同样式风格的输出方法:
1. 嵌套输出方式 nested
编译时加上–style nested,如:sass –watch test.scss:test.css –style nested
2. 展开输出方式 expanded
编译时加上–style expand,如:sass –watch test.scss:test.css –style expanded
3. 紧凑输出方式 compact
编译时加上–style compact ,如:sass –watch test.scss:test.css –style compact
4. 压缩输出方式 compressed
编译时加上–style compressed,如:sass –watch test.scss:test.css –style compressed