Sass/SCSS 变量

Quasar 内置了一些 Sass/SCSS 变量，您可以根据需要使用/修改它们。

WARNING

这只适用于使用 Quasar CLI 创建的项目。

用法

如果您是使用 Quasar CLI 创建的项目，那么您可以在项目的 *.vue 文件或者 .sass/.scss 文件中直接使用 Quasar 内置的 Sass/SCSS 变量，（例如： $primary , $red-1 ）。也可以使用您在 /src/css/quasar.variables.scss 文件中自定义的 Sass/SCSS 变量（或者是 /src/css/quasar.variables.sass 文件）

<!-- 注意 lang="sass" -->
<style lang="sass">
  color: $red-1
  background-color: $grey-5
</style>
<!-- 注意 lang="scss" -->
<style lang="scss">
div {
  color: $red-1;
  background-color: $grey-5;
</style>

TIP

src/css/quasar.variables.sass 或 src/css/quasar.variables.scss 文件并不是必须的，只有您想自定义变量或者修改 Quasar 内置的变量时，您才需要创建他们

WARNING

当您创建/删除 src/css/quasar.variables.sass 或 src/css/quasar.variables.scss 文件后，您可能需要重启一次 Quasar，否则将看不到项目的变化。

警告

sass/scss 文件中至少得有一个’$‘字符才会被 Quasar CLI 自动注入内置的 Sass/SCSS 变量所以您想在您导入的 sass/scss 文件中使用上述预设的变量，得先保证，这个文件中至少有一个’$'字符，或者，您可以使用一个简单的注释来处理这个问题( // $ )

<style lang="sass">
//注意上一行的注释