Vue实战039：Sass快速入门

1、什么是Sass

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

2、Sass的不足

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

3、什么是Scss

Scss是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预处器类型即可，即<style scoped>，然后在style中写sass语法的样式即可，下面写了个简单个样式，定义了变量$color: #F90，变量与值之间必有又空格，否则会报错，属性定义也需要空格，否则样式无法生效（不会报错），如color: red与color:red，看之相同但是后者不生效，中间缺少空格。

7、使用Scss

想用scss则将lang值改成scss即可，即<style scoped>，然后在style中写scss语法的样式，这里写了个与上面一样的样式，用scss方式书写而已，用花括号与分号区分，对空格不敏感。

8、这是最上面是登录页的完整实例样式，用Scss写的样式定义了两个变量，一个是icon图标的颜色，一个是字体的颜色。这里我用了一个单独的文件放置scss样式，在组件中通过@import './style.scss';导入样式，下面是页面效果，页面用到了element-ui插件：