Vue中Scss的基本使用

什么是Sass
Sass作为CSS的一种预处理器，预处理器就是定义了一种新的语言，其基本思想是用一种专门的编程语言，为CSS增加了一些编程的特性，将CSS作为目标生成文件，然后开发者就只要使用这些语言进行编码工作。使用CSS预处理器可以大大提高编码效率。
Scss与Sass的区别
1.文件扩展名不同，Sass 是以“.sass”后缀为扩展名，而 Scss是以“.scss”后缀为扩展名
2.语法书写方式不同，Sass 是以严格的缩进式语法规则来书写，不带大括号({})和分号(😉，而 Scss的语法书写和我们的 CSS 语法书写方式非常类似。
Scss的基本使用：
第一步：在终端安装

npm install sass-loader@7.1 --save-dev
npm install node-sass --save-dev

注：如果报错注意版本问题，可以进行制定版本安装
第二步：
创建test.scss文件
第三步：
在组件中进行引入

<style lang="scss" scoped>
  @import "../assets/css/test.scss";
</style>

Scss基本语法：
引入其他文件
1.引入.scss样式文件
文件在编译后，会自动把引入的文件和当前文件合并为一个.scss文件

@import "test.scss"  

2.引入.css样式文件
和引入.scss文件不同，这样引入的.css文件在编译后不会和当前文件合并为一个.scss文件，而是继续保持为外链引入方式

@import "test.css"  

代码注释
1.块注释 css中显示
2.行注释 css中不显示
3.重要注释 压缩不会被删掉
变量
常规变量
以$符号开头,后面紧跟变量名。变量名和变量值之间用冒号：分开，以分号结尾。

$bgcolor:blue;
$height:200px;
$width:200px;
$left:left;

默认变量

$color:red !default