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 引入后直接可以使用

<script src="https://cdn.bootcss.com/less.js/3.0.4/less.js"></script>
<script src="https://cdn.bootcss.com/less.js/3.0.4/less.min.js"></script>

2. less 的常用操作

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

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

<template>
  <div>
      <h1>变量</h1>
      <div class="content1">content</div>
      <div class="content2">content</div>
    </div>
</template>
<style lang="less" scoped>
@baseWidth: 100px;
@contentWidth: @baseWidth + 100px;
@pink: pink;
@green: #eee;
.content1 {
  width: 100px + @baseWidth;
  background: @pink;
}
.content2 {
  width:100px + @contentWidth;
  background: @green;
}
</style>

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

<template>
  <div class="wrapper">
    <h1>映射（Maps）</h1>
    <div class="content1">内容</div>
  </div>
</template>
<style lang="less" scoped>
.font() {
  size: 50px;
  weight: bolid;
}
.wrapper {
  .content1 {
    height: 20vh;
    background: darkseagreen;
    font-size: .font[size];
    font-weight: .font[weight];
  }
}
</style>

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

<template>
  <div>
      <h1>混合（Mixins）</h1>
      <div class="content1">content</div>
    </div>
</template>
<style lang="less" scoped>
.mxins_border {
  border: 1px solid;
}
.content1 {
  height: 200px;
  .mxins_border()
}
</style>

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

<template>
  <div class="wrapper">
    <h1>混合（Mixins）</h1>
    <div class="main">
      <div class="content1">content</div>
    </div>
    <div class="result">
      result
    </div>
  </div>
</template>
<style lang="less" scoped>
.wrapper {
  height: 100vh;
  background: cornflowerblue;
  .main {
     background: darkcyan;
    .content1 {
      height: 30vh;
      color: #fff;
      font-size: 36px;
      border: 1px solid #fff;
    }
  }
  & .result {
    background: darkred;
    .wrapper.main.content1()
  }
}
</style>

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

<template>
  <div>
    <div class="wraper">
      <h1>嵌套（Nesting）</h1>
      <div class="content1">content</div>
    </div>
    <div class="content1">此样式不生效</div>
  </div>
</template>
<style lang="less" scoped>
.wraper {
  background: #eee;
  .content1 {
    height: 200px;
    background: cadetblue;
  }
}
</style>

4. 运算（Operations）

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

<template>
  <div class="main">
    <div class="wraper">
      content
    </div>
  </div>
</template>
<style lang="less" scoped>
.main {
  .wraper {
    height: calc(100vh - 100px);
    background: cadetblue;
  }
}
</style>

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

<template>
  <div class="main">
    <h1>转义（Escaping）</h1>
    <div class="wraper">
      content
    </div>
  </div>
</template>
<style lang="less" scoped>
@width: ~ '300px';
.main {
  .wraper {
    height: ~ '300px';
    width: @width;
    background: cadetblue;
  }
}
</style>

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

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

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

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