gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-05 02:06:10 24 4
gpt4 key购买 nike

我有几个类由 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 性),但我更喜欢更原生的解决方案。

最佳答案

要让@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';

关于css - 如何将多个类合并为一个?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/62883931/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com