less 和 Scss 的配置使用以及特点？（必会）
less
安装依赖
1 npm install less less-loader --save
或者
2 cnpm install less less-loader --save
修改配置
在 vue 项目中 build/webpack.base.conf.js：
moduls 对象的 rules 数组中最后添加
{
test: /\.less$/,
loader: "style-loader!css-loader!less-loader"
}
引入
在每个想要使用 less 的 vue 文件中
style 加上 lang=“less”
1 <style lang="less" scoped>
2 </style>
SCSS 即是 SASS 的新语法，是 Sassy CSS 的简写，是 CSS3 语法的超集，也就是说所有有
效的 CSS3 样式也同样适合于 SASS
SASS 是 CSS3 的一个扩展，增加了规则嵌套、变量、混合、选择器继承等等。通过使用命
令行的工具或 WEB 框架插件把它转换成标准的、格式良好的 CSS 代码
SCSS 是 SASS 3 引入新的语法，其语法完全兼容 CSS3，并且继承了 SASS 的强大功能。
唯一不同的是，SCSS 需要使用分号和花括号而不是换行和缩进
SCSS 对空白符号不敏感
安装步骤：
npm install node-sass --save-dev
//安装 node-sass
npm install sass-loader --save-dev
//安装 sass-loader
npm install style-loader --save-dev
//安装 style-loader
出现以下问题可能是版本错误
Modele build failed: TypeError: this.getResolve is not a function at Object.loader...
处理方法
将 "sass-loader": "^8.0.0"，更换成了 "sass-loader": "^7.3.1"
package.json 中查找替换
npm install
npm run dev
特性：
一、（节点）可嵌套性
这个是基础，用的太多太多了，必须掌握
二、变量
变量以$开头（通常网站会有基础变量，譬如基础字体，基础色调等，可以将他们赋值给一
个变量，以后调用变量就好了，很类似 js 里的变量）
三、 Mixins(混合@mixin)：可重用性高，可以注入任何东西
注意点：
1、可以相互调用，但是不能拿自己调用自己，形成递归
2、通过@include 引用
四、@extend：允许一个选择器继承另一个选择器
五、 @function:函数功能，用户使用@function 可以去编写自己的函数（常用）
使用语法： 使用 @function+函数名称，每个函数都需要有返回值的内容
六、引用父元素&：在编译时，&将被替换成父选择符（常用）
七、计算功能（会用 但是不多吧）
八、组合连接： #{} ： 变量连接字符串（目前用到的是这个）
九、循环语句：（很少用到）
十、if 语句：（很少用到）
::before 和::after 中双冒号和单冒号有什么区别、作用？
（必会）
区别
在 CSS 中伪类一直用 : 表示，如 :hover, :active 等
伪元素在 CSS1 中已存在，当时语法是用 : 表示，如 :before 和 :after
后来在 CSS3 中修订，伪元素用 :: 表示，如 ::before 和 ::after，以此区分伪元素和伪类
由于低版本 IE 对双冒号不兼容，开发者为了兼容性各浏览器，继续使使用 :after 这种老语
法表示伪元素
单冒号（：）用于 CSS3 的伪类
双冒号（：：）用于 CSS3 的伪元素
想让插入的内容出现在其它内容前，使用::before，否者，使用::after；
在代码顺序上，::after 生成的内容也比::before 生成的内容靠后
如果按堆栈视角，::after 生成的内容会在::before 生成的内容之上
作用：
::before 和::after 的主要作用是在元素内容前后加上指定内容
伪类与伪元素都是用于向选择器加特殊效果
伪类与伪元素的本质区别就是是否抽象创造了新元素
伪类只要不是互斥可以叠加使用
伪元素在一个选择器中只能出现一次，并且只能出现在末尾
伪类与伪元素优先级分别与类、标签优先级相同