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.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.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。