scss或sass高级用法

普通

• 定义

<style lang="scss">.el{}</style>

• 使用

<xx class="el"></xx>

模块化

• 定义

• 内部文件

<style lang="scss" module>.el{}</style>

• 外部文件(文件名使用xxx.module.scss)

$hl:#bfcbd9;
:export {
  hl: $hl;
}

• 使用

• 内部文件

<xx class={$style.hl}></xx>

• 外部文件

import variables from "styles/xxx.module.scss";
<xx class={$variables.hl}></xx>

独立作用域

• 引入

<style lang="scss" scope>.el{}</style>

• 使用

<xx class=el></xx>