css - 如何将多个类合并为一个？

Question

我有几个类由 Quasar framework 提供.当有几个看起来应该相同的组件时，我有一个重复的模式，例如

<div class="q-ma-xs text-h6 bg-black">one</div>
<div class="q-ma-xs text-h6 bg-black">two</div>
<div class="q-ma-xs text-h6 bg-black">three</div>
(...)

我正在寻找一种将所有类组合成一个类的方法，以便对所有元素应用全局修改。

我希望可以使用多个 @extend 一个新类定义中的条目，但情况似乎并非如此。

是否有 CSS/SCSS/SASS 方法来进行这样的合并？

我的备份计划是使用 <div :class="myElement">one</div>其中 myElement在脚本部分定义(Vue 中的 react 性)，但我更喜欢更原生的解决方案。

Answer 1

要让@Bryce Howistson 回答与@extend 一起工作，我必须添加

@import "node_modules/quasar/src/css/index";

在每个 .vue 文件中，我想扩展类星体类(在文件末尾的样式标签中)。

避免再次导入所有组件(具有所有类星体组件样式的重索引文件)。我使用了以下导入的自定义索引文件:

// inside custom file: /src/css/quasar.extend.library.scss
@import "node_modules/quasar/src/css/flex-addon.sass";
@import "node_modules/quasar/src/css/variables.sass";
@import 'node_modules/quasar/src/css/core/animations.sass';
@import 'node_modules/quasar/src/css/core/colors.sass';
@import 'node_modules/quasar/src/css/core/elevation.sass';
@import 'node_modules/quasar/src/css/core/flex.sass';
@import 'node_modules/quasar/src/css/core/helpers.sass';
@import 'node_modules/quasar/src/css/core/mouse.sass';
@import 'node_modules/quasar/src/css/core/orientation.sass';
@import 'node_modules/quasar/src/css/core/positioning.sass';
@import 'node_modules/quasar/src/css/core/size.sass';
@import 'node_modules/quasar/src/css/core/touch.sass';
@import 'node_modules/quasar/src/css/core/transitions.sass';
@import 'node_modules/quasar/src/css/core/typography.sass';
@import 'node_modules/quasar/src/css/core/visibility.sass';
@import 'node_modules/quasar/src/css/core/dark.sass';