Vuetify Sass 变量 Vue-CLI

Vuetify 是一个基于 Vue.js 的 Material Design 组件库，可以帮助我们快速构建漂亮且响应式的 Web 应用程序。在使用 Vuetify 的过程中，可以像普通的样式表一样自定义样式。在这里，我们提供了一些关于使用 Sass 变量的讨论，以在应用程序中使用 Vuetify Sass 变量。

安装

安装 Vue-CLI 和 Vuetify 以开始使用：

# 安装 Vue-CLI 
npm install -g vue-cli

# 创建一个基于 webpack 模板的新项目
vue init webpack my-project

# 安装 Vuetify
cd my-project
npm install vuetify --save

在项目中使用

导入Sass文件

在您的Vue文件中，您可以导入Vuetify的 Sass 文件以享受全局访问 Sass 变量的能力。在这里，我们将在main.js文件中导入它。

import 'vuetify/dist/vuetify.min.css'
import 'vuetify/src/stylus/app.styl'

如果您选择使用Sass而不是Stylus，请稍微更改此代码以正确导入Sass文件。

在Vuetify组件中使用Sass变量

在Vuetify组件中使用Sass可以很容易地通过类属性来实现，如下所示。

<v-toolbar class="primary">
  <v-toolbar-title>My Title</v-toolbar-title>
</v-toolbar>

这里我们将 <v-toolbar> 组件的 class 属性设置为 primary。这会应用 app/styles/globals/colors.scss 中定义的 $primary 变量。

创造自定义样式

在这里，我们将创造一个自定义样式，以便我们在应用程序中使用一个新的 Sass 变量。要开始，我们要创建一个新的 Sass 文件，这里我们将它命名为 _custom.sass。

custom.sass:

@import '~vuetify/src/styles/styles.sass'

$primary: #003366

在这里，我们将 $primary 变量重写为我们自己的颜色值（#003366）。现在，我们可以在我们的应用程序中使用我们自己的 Sass 变量。

<v-toolbar class="my-custom-toolbar">
  <v-toolbar-title>My Custom Title</v-toolbar-title>
</v-toolbar>

这里，我们将 <v-toolbar> 组件的 class 属性设置为 my-custom-toolbar，之后，在 app/styles/custom.sass 中，我们定义了 $primary 变量并添加到 my-custom-toolbar 类，这样 my-custom-toolbar 类就会应用我们自定义的 $primary 变量。

总结

在这篇文章中，我们讨论了如何使用 Vuetify Sass 变量。我们开始了解如何在项目中使用 Sass 文件来重写 Vuetify 的 Sass 变量。之后，我们创建了我们自己的 Sass 变量，并将其应用到自定义的类上，以在我们的应用程序中创造自定义样式。