Vue使用LESS、SASS和SCSS

CSS预编译语言

SASS和SCSS其实是一样的CSS预处理语言，SCSS 是 SASS3 引入新的语法，其后缀名是分别为 .sass和.scss两种。
SASS版本3.0之前的后缀名为.sass，而版本3.0之后的后缀名.scss。
两者是有不同的，继sass之后scss的编写规范基本和css一致，sass时代是有严格的缩进规范并且没有‘{}’和‘；’。
而SCSS则和CSS的规范是一致的。

vue搭建预编译环境

vue版本： “vue”: “^2.6.11”
（1）安装node-sass
sass-loader依赖于node-sass，所以要安装node-sass

npm install [email protected] --save-dev

（2）安装sass

npm install [email protected] --save

Vue使用SASS

sass最初语法格式，是通过tab键控制缩进的一种语法规则，对锁紧要求非常严格，而且不带有任何的分号和大括号，把这种语法格式成为sass老版本，其文件名以“.sass”为扩展名。

效果：

Vue中使用SCSS

scss是sass的新语法格式，从外形上来判断他和css几乎是一样的，代码都包裹在一对大括号里，并且末尾结束出都有一个分号，其文件名以 “.sass”为扩展名。
在style内加入lang=‘scss’

SCSS语法

SCSS中使用vue定义的变量

关键在于mounted方法内为style添加属性。