开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第26天，点击查看活动详情
一、less 和 Scss 的配置使用以及特点
1.安装依赖
1）npm install less less-loader --save
2）cnpm install less less-loader --save
2.修改配置
在 vue 项目中 build/webpack.base.conf.js：
moduls 对象的 rules 数组中最后添加
{
test: /.less$/,
loader: "style-loader!css-loader!less-loader"
}
3.引入
在每个想要使用 less 的 vue 文件中
style 加上 lang=“less”
scss
SCSS 即是 SASS 的新语法，是 Sassy CSS 的简写，是 CSS3 语法的超集，也就是说所有有效的CSS3 样式也同样适合于 SASS。
SASS 是 CSS3 的一个扩展，增加了规则嵌套、变量、混合、选择器继承等等。通过使用命令行的工具或 WEB 框架插件把它转换成标准的、格式良好的 CSS 代码。
SCSS 是 Sass 3 引入新的语法，其语法完全兼容 CSS3，并且继承了 Sass 的强大功能。
唯一不同的是，SCSS 需要使用分号和花括号而不是换行和缩进。SCSS 对空白符号不敏感。
4.安装步骤：
npm install node-sass --save-dev //安装 node-sass
npm install sass-loader --save-dev //安装 sass-loader
npm install style-loader --save-dev //安装 style-loader
5.出现以下问题可能是版本错误
Modele build failed: TypeError: this.getResolve is not a function at Object.loader...
6.处理方法
将 "sass-loader": "^8.0.0"，更换成了 "sass-loader": "^7.3.1"
package.json 中查找替换
npm install
npm run dev
7.特性：
1）（节点）可嵌套性
2）变量
变量以$开头（通常网站会有基础变量，譬如基础字体，基础色调等，可以将他们赋值给一个变量，以后调用变量就好了，很类似 js 里的变量）
3）Mixins(混合@mixin)：可重用性高，可以注入任何东西
注意点：
可以相互调用，但是不能拿自己调用自己，形成递归
通过@include 引用
4）@extend：允许一个选择器继承另一个选择器
5）@function:函数功能，用户使用@function 可以去编写自己的函数（常用）
使用语法：
使用 @function+函数名称，每个函数都需要有返回值的内容
6）引用父元素&：在编译时，&将被替换成父选择符（常用）
7）计算功能（会用 但是不多吧）
8）组合连接：
#{} ：
变量连接字符串（目前用到的是这个）
9）循环语句：（很少用到）
10）if 语句：（很少用到）
