Quasar中内置了Sass/SCSS变量，您可以根据需要在devland中进行更改和/或使用。
WARNING
- 这仅适用于Quasar CLI管理的应用。
@quasar/app的最低要求版本为v1.1。 您还需要quasarv1.1.1 +。
用法
在应用的*.vue文件或.sass/.scss文件中，您可以使用任何Quasar Sass/SCSS变量（例如：$primary, $red-1）和任何其他Sass/SCSS变量 使用Quasar CLI时，您在 /src/css/quasar.variables.sass或完全等效的/src/css/quasar.variables.scss中声明的变量（取决于您最喜欢的Sass风格）。
<!-- 注意lang="sass" -->
<style lang="sass">
div
color: $red-1
background-color: $grey-5
</style>
<!-- 注意lang="scss" -->
<style lang="scss">
div {
color: $red-1;
background-color: $grey-5;
}
</style>
TIP
如果要访问Quasar Sass/SCSS变量，则不一定需要具有src/css/quasar.variables.sass或src/css/quasar.variables.scss文件。 仅当要自定义变量时，才创建其中一个。
WARNING
创建或删除任何src/css/quasar.variables.*文件时，您将需要重新启动开发服务器才能使其生效。 但是，当您更改这些文件的内容时，也不必重新启动。
警告
Quasar CLI会检测该文件是否至少包含一个“$”字符，如果是，它将自动导入Quasar Sass/SCSS变量。
但是，如果您有一个嵌套的import语句，并且要从中导入的文件不包含任何“$”字符，则此操作将无效。 在这种情况下，您需要添加一个简单的注释（// $），以便Quasar可以检测至少一个“$”字符：
<style lang="sass">
// $
@import 'some-file.sass'
// 由于上面的注释，
// some-file.sass也可以
// 从Quasar Sass变量中受益
</style>
quasar.conf.js > css中包含的.sass/.scss文件也需要相同的内容。
自定义
如果您想自定义变量（或添加自己的变量），而您的项目尚没有src/css/quasar.variables.sass（或src/css/quasar.variables.scss）文件，请自己创建它们中的一个。选择.sass或.scss作为此文件的扩展名都没关系。 拥有其中一个将为所有.sass和.scss项目文件（包括.vue文件内部）提供变量。
您可以在这些文件中自由覆盖Quasar的任何变量（请参阅下一部分）。 为方便起见，如果在创建Quasar项目文件夹时选择了Sass或SCSS，则这些文件最初仅包含与品牌颜色相关的变量。
TIP
Quasar非常易于自定义，而无需篡改Sass/SCSS变量，因此请确保您确实需要这样做。 没有这两个文件之一实际上会加快构建速度，而默认变量仍将提供给.sass/.scss/.vue文件。
Quasar的CSS
Quasar自己的CSS使用变量文件（如果存在）进行编译，但是您也可以使用Stylus变量。 因此必须有Quasar CLI的优先级列表：
- 是否存在
src/css/quasar.variables.styl？用这个。 - 如果没有，那么
src/css/quasar.variables.scss是否存在？用这个。 - 如果没有，那么
src/css/quasar.variables.sass是否存在？用这个。 - 如果没有，请使用预编译的Quasar CSS。