前言

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

什么是Sass

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

Sass的不足

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

什么是Scss

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

Sass与Scss的区别

1，文件扩展名不同，Sass 是以“.sass”后缀为扩展名，而 Scss是以“.scss”后缀为扩展名

2，语法书写方式不同，Sass 是以严格的缩进式语法规则来书写，不带花括号{}和分号;，而 Scss的语法书写和我们的 CSS 语法书写方式相似。

安装Sass

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

使用Sass

在组件中修改style标签，用lang属性指定使用的CSS预处器类型即可，即<style lang="sass" scoped>，然后在style中写sass语法的样式即可，下面写了个简单个样式，定义了变量$color: #F90，变量与值之间必有又空格，否则会报错，属性定义也需要空格，否则样式无法生效（不会报错），如color: red与color:red，看之相同但是后者不生效，中间缺少空格。

<style lang="sass" scoped>$color: #F90.login-container  $width: 500px width: $width color: $color .svg-container font-size: 28px color: red float: left</style>

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

<style lang="scss" scoped>$nav-color: #F90;.login-container { $width: 500px; width: $width; color: $nav-color; .svg-container{ font-size: 28px; color: red; float: left; }}</style>

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

$icon_color:#889aa4;$font_color:#eee;.login-container{ background-color: #283443; width:100%; height: 100vh; display: flex; justify-content: center; align-items: center; color:$font_color; .login-form{ position: relative; z-index: 10; min-width: 320px; overflow: hidden; width:50%; h3{ font-size: 26px; margin: 0px auto 40px auto; text-align: center; font-weight: bold; } .el-form-item{ background-color: rgba(0, 0, 0, 0.1); border-radius: 5px; padding:5px; border: 1px solid rgba(255, 255, 255, 0.1); .svg-container{ position: absolute; left: 10px; font-size: 16px; cursor: pointer; user-select: none; color:$icon_color; z-index: 100; } .el-input{ display: inline-block; padding-left: 20px; input{ background: transparent; border:none; color:$font_color; } } .show-pwd{ position: absolute; right: 10px; font-size: 16px; z-index: 100; color: $icon_color; cursor: pointer; user-select: none; } } } .el-button{ width:100%; }}

欢迎关注本人的公众号：编程手札，文章也会在公众号更新