sass 参考：https://sass.bootcss.com/

1. cdn 地址

<script src="https://cdn.bootcdn.net/ajax/libs/sass.js/0.9.9/sass.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/sass.js/0.9.9/sass.min.js"></script>

2. sass 的常用操作

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

1. 变量（Variables）
   常用于公共样式属性的复用

定义语法: $变量名称: 变量值;
使用语法: $变量名称

<template>
  <div id="main">
    <div class="content1">sass 变量</div>
  </div>
</template>
<style lang="scss" scoped>
$bg-color: red;
$text-color: #fff;
#main {
  background: rgba($bg-color, 0.6);
  color: $text-color;
}
</style>

映射（Maps）
它类似js里面从对象中获取属性的值，除了获取属性值，还有对映射属性的判断、移除，获取属性名和所有属性值等方法，根据需要自行使用

定义语法: $映射变量名称: (属性名：属性值，属性名：属性值)
使用语法: map-get($映射变量名称, 属性名)

<template>
  <div id="main">
    <div class="content1">sass 映射</div>
  </div>
</template>
<style lang="scss" scoped>
$colors: (
  "bg-color": red,
  "text-color": #fff,
);
#main {
  background: rgba(map-get($colors, "bg-color"), 0.6);
  color: map-get($colors, "text-color");
}
</style>

2. 混合（Mixins）
   常用于一组样式的复用，定义混合类时可以使用其他混合类（可嵌套）

定义语法: @mixin 混合类名{混合样式};
使用语法: @include 混合类名;

<template>
  <div id="main">
    <div class="content1">sass 混合</div>
  </div>
</template>
<style lang="scss" scoped>
@mixin bg-color {
  background: rgba(red, 0.6);
}
@mixin colors {
  @include bg-color;
  color: #fff;
}

#main {
  @include colors;
}
</style>

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

<template>
  <div id="main">
    <h1>sass 嵌套</h1>
    <div class="content1">
      <div>内容一</div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
#main {
  background: #ccc;
  height: 50vh;
  & h1 {
    color: rgb(240, 143, 17);
  }
  & > div {
    padding: 10px;
    background: darkcyan;
    & div {
      color: chartreuse;
      background: chocolate;
    }
  }
}
</style>

4. 运算（Operations）

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

<template>
  <div id="main">
    <h1>sass 运算</h1>
  </div>
</template>
<style lang="scss" scoped>
#main {
  background: #ccc;
  height: calc(50vh + 200px);
  width: 100px * 10;
}
</style>

5. 函数（Functions）
   sass 内置了多种函数用于转换颜色、处理字符串、算术运算等
   内置函数，参考：https://www.jianshu.com/p/ef2ca6fbf944
   自定义函数，参考：https://www.jianshu.com/p/7f879ce0cbb9

定义语法: @function 函数名(参数: 无参默认值) {  @return 函数最终返回值}
使用语法: 函数名(参数)

<template>
  <div id="main">
    <h1>sass 函数</h1>
  </div>
</template>
<style lang="scss" scoped>
@function add($a: 100px, $b: 100px) {
  @return calc($a + $b);
}

#main {
  background: #ccc;
  height: add(50vh);
  width: add(50vw, 30vw);
}
</style>

6. 引入 .scss文件
   引入方法和引入css方法一样，scss文件的后缀名称可以省略，使用时注意后边的分号;必须加，否则报错

@import "@/assets/styles/index.scss";

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