Sass/SCSS变量

Quasar中内置了Sass/SCSS变量,您可以根据需要在devland中进行更改和/或使用。

WARNING

这仅适用于Quasar CLI管理的应用。

用法

在应用的*.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.sasssrc/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.config.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使用变量文件(如果存在)进行编译,但有多种形式(sass、scss)。 因此必须有Quasar CLI的优先级列表:

  • 是否存在src/css/quasar.variables.scss?用这个。
  • 如果没有,那么src/css/quasar.variables.sass是否存在?用这个。
  • 如果没有,请使用预编译的Quasar CSS。

变量列表