Vuetify 使用 SASS/SCSS 来制作框架的风格和外观。利用你的 vue.config.js 文件中的 _sass/scss 数据选项_，你可以选择性地传递自定义变量来覆盖全局默认值。可用变量的列表位于每个组件的API部分和本页面的 Variable API 中。此功能由 vue-cli-plugin-vuetify 自动处理。
注意：只有使用 A-la-carte 安装 才支持 SASS/SCSS 变量。使用 *vue-cli-plugin-vuetify *插件时这将会自动设置。
如果你还没有安装 Vuetify，请查看 快速启动指南。安装完成后，在你的 src 目录下创建一个名为 sass、scss 或 styles 的文件夹，文件名为 variables.scss 或 variables.sass。vuetify-loader 会自动将你的变量引导到 Vue CLI 的编译过程中，覆盖框架的默认值。
当你运行 yarn serve 时，vuetify-cli-plugin 会自动将全局的 Vuetify 变量提升到你所有的 sass/scss 文件中。当对单个组件变量进行修改时，你仍然需要手动包含它的变量文件。你可以在下面找到一个 自定义变量 文件的例子。
即将推出。如果你有兴趣在这部分的合作，请联系 社区 中的 _johnleider_。
本节假设你已经按照我们在 快速启动 页面上的 Webpack 指南进行了操作。这个选项会根据你所使用的 sass-loader 的版本而有所不同。确保你在设置 SASS/SCSS 数据选项时使用正确的语法，因为它们有不同的行尾。你可以在 sass-loader 的 Github 页面上找到更多关于 prependData 的信息。
在整个 Vuetify 框架中，有很多 SASS/SCSS 变量可以被自定义。下面是一个自定义的 variables 文件的例子。你可以在下面找到更多关于可用的 变量 信息。
下面是变量文件的示例：
有两种方法可以在你的组件中导入和使用 Vuetify 变量，这两种方法提供了相同的结果。第一种方法是导入默认的框架样式文件：
如果你使用 预设 或根本 不 使用变量文件，这是首选的方法。
第二种方法是导入你的项目的 specific 变量文件。如果你使用自己的变量文件导入全局的 Vuetify 样式，建议使用这个方法。
请记住，在导入和使用变量文件时，你使用的 SASS 或 SCSS 这些语法 _并不重要_。
使用 sass 变量时，有几个注意事项需要注意。
当使用变量文件时，请确保你 只 定义或导入其他变量。引导的文件会被添加到每个组件中，并且会导致你的应用程序中的 CSS 重复。下面是 不 要这么做的一个例子。
当使用变量时，你的应用程序的初始编译工作会增加。这是由于每当你对挂起的变量文件进行修改时，样式会实时更新。这种情况只有在初始编译步骤中才会出现，可以通过改变你从哪里导入 Vuetify 来改善。请记住，如果你的应用程序受到任何 Vuetify loader 限制 的影响，则此方法 将无法 正常使用；你的应用程序仍然可以运行，但不会得到性能的提升。