多语言展示
当前在线：447今日阅读：126今日分享：42

Vue实战039：Sass快速入门
前面分享了Vue实战036：CSS预处理器，我们知道了目前比较流行的几种预处理器，大家可以根据自己的需求来选择适合自己的CSS预处理器，这里我用的是Sass预处理器。Sass是成熟、稳定、强大的 CSS 扩展语言解析器，它在 CSS 语法的基础上增加了变量、嵌套、混合、继承、导入等高级功能，让CSS的书写更加简洁和高效。特别是新版本Scss，继承了Sass强大的功能的同时还完美的兼容CSS3，让书写更加便捷了。
工具/原料

Sass

方法/步骤
1

什么是SassSass是一种针对CSS样式开发的语言，有自己的变量、常量、条件语句以及编程语法，支持嵌套、混入、函数、继承、导入等功能，通过它可以简化CSS样式，增加CSS特性，让你的CSS更加简洁、适应性更强、可读性更佳，易于维护，开发效率更高。最后编译成正常的CSS文件，以供项目使用。

2

Sass的不足用过sass的朋友应该知道，Sass在写法上很精简，跟Python很相似，与CSS 之间的差异较大，省去了花括号和引号，以严格的缩进式语法规则来书写代码，属性和值之间缺少个空格都无效（关键是样式属性中不会报错...），在VScode中使用sass貌似没有智能提示，经常写错单词....，Sass对缩进和空白符号很敏感，不过如果能习惯的话还是很不错的，精简高效。

3

什么是ScssScss是Sass的升级版，在Sass 3 中引入了新的语法，在继承了 Sass 的强大功能的同时完全兼容 CSS3，写法还原了CSS的样式，Scss使用分号和花括号替换了Sass 的换行和缩进，对空白符号不敏感。Scss的语法书写和我们的 CSS 语法书写方式非常类似，新手更容易上手。

4

Sass与Scss的区别1，文件扩展名不同，Sass 是以“.sass”后缀为扩展名，而 Scss是以“.scss”后缀为扩展名2，语法书写方式不同，Sass 是以严格的缩进式语法规则来书写，不带花括号{}和分号;，而 Scss的语法书写和我们的 CSS 语法书写方式相似。

5

安装Sass参考Vue实战036：CSS预处理器，这篇是以Sass为例的，安装不难，主要是网络问题，通过淘宝镜像下载就好了，执行命令： npm install --save-dev sass-loader node-sass(sass-loader依赖node-sass),这样我们就安装好了sass。

6

使用Sass在组件中修改style标签，用lang属性指定使用的CSS预处器类型即可，即