vue 项目中使用less

less 参考：https://less.bootcss.com/
sass 参考：https://sass.bootcss.com/
说明参考： https://www.jianshu.com/p/6a35a548c9e1

1. less 介绍

• CSS是一种标记性语言。如果没有calc()方法，CSS是不能进行真正意义上的计算的，更不提函数、变量这些了
• Less是css预编译语言的一种，基于JS进行开发，在Node中进行编译。所以使用时不需要安装其他语言
• cdn 引入后直接可以使用

2. less 的常用操作

如果在vue脚手架搭建的项目中需要使用less，建议初始化时勾选less配置，自行安装

1. 变量（Variables）
   常用于公共样式属性的复用
   语法：@变量名称: 变量值；

映射（Maps）
与less变量类似，它类似js里面从对象中获取属性的值
语法 ：.或者#映射类() {属性名:属性值; 属性名:属性值;}

2. 混合（Mixins）
   与变量类似，常用于一组样式的复用

命名空间和访问符，和混合（Mixins）类似，这里是复用子类下的样式给其他类
示例：result类复用了上方的 content1 类的样式

3. 嵌套（Nesting）
   开发必用，less样式和vue模板的层级同步，所赋予的样式只在当前层级下生效，其中注意当前父级 & 的使用

4. 运算（Operations）

• 加减运算只要保持单位统一会自动换算单位，最终的单位以左侧为主，如果单位无效则忽略单位，建议涉及两种运算单位时使用css的calc()函数
• 乘除运算是单位和数字运算，不需要考虑这个

5. 转义（Escaping）
   我们可以发现，less变量的值不是字符串（没有引号），普通属性也不是字符串
   如果使用字符串的属性，需要在字符串前加上 ~ 号

6. 函数（Functions）
   Less 内置了多种函数用于转换颜色、处理字符串、算术运算等。这些函数在Less 函数手册中有详细介绍
7. 引入 .less 文件
   引入方法和引入css方法一样，less文件的后缀名称可以省略，使用时注意后边的分号;必须加，否则报错

@import "../assets/less/library.less"; 

8. 注释
   和js注释相同
   单行：// 注释内容
   多行：/* 注释内容 */

如果还不满足于项目的开发，可研究一下less进阶知识，https://less.bootcss.com/features/