We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
You can continue the conversation there. Go to discussion →
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
使用css3的变量函数 var(--) 来自定义。
以Button按钮组件为例子: 开发者如果想自定义背景色(background-color)、字体色(color)、边框(border) 现阶段是样式覆盖,经测试需要加 !important 才能覆盖以上样式,个人感觉写法有点不爽 如果使用css3的变量函数 var(--) ,按照以下写法,个人感觉合理,希望能被采纳
.t-button{ color: var(--color , #000000e6); background-color: var(--background-color , #fff); border: var(--border , 1px solid #dcdcdc); }
.my-button{ --color : red; --background-color : blue --border : solid 5px yellow }
The text was updated successfully, but these errors were encountered:
确实可以的,目前其他端已经使用了 CSS variables ,后续小程序也会采用这种方案。
如果有兴趣的话,可以一起参与改造~
Sorry, something went wrong.
在组件自定义样式中定义变量, 确实是一个很新奇的想法, 避免了写 !important
我的想法是将 Less 变量声明全部使用上 var, 方便 app 或者 page 内全局替换, 而不仅仅使用 var 修改一个特定组件
不足之处请见谅!
尝试将 Less 变量中的详细数值, 独立到 page(相当与网页的 :root) 中的 var 变量
page 下的 wxss 权重大于 app.wxss
// 旧的变量声明 // 基础颜色 @primary-color: #0052D9; // 色彩-品牌-可操作 @success-color: #00A870; // 色彩-功能-成功 @warning-color: #ED7B2F; // 色彩-功能-警告 @error-color: #E34D59; // 色彩-功能-失败 // ------------------------------------------ // 新的变量声明 page { --primary-color: #0052d9; // 色彩-品牌-可操作 --success-color: #00a870; // 色彩-功能-成功 --warning-color: #ed7b2f; // 色彩-功能-警告 --error-color: #e34d59; // 色彩-功能-失败 } // Less 变量定义时, 使用 CSS var @primary-color: var(--primary-color, #0052d9); // 色彩-品牌-可操作 @success-color: var(--success-color, #00a870); // 色彩-功能-成功 @warning-color: var(--warning-color, #ed7b2f); // 色彩-功能-警告 @error-color: var(--error-color, #e34d59); // 色彩-功能-失败
完整代码及预览 https://codepen.io/vhxubo/pen/yLzRoGm?editors=1100
// 因为没有测试过组件库 Less 与 page 页面的样式权重 // 如有问题, 请见谅, 以下主要展示相关思路 // ------------------------------------------ // 模拟小程序中对应的 page page { --primary-color: #0052d9; // 色彩-品牌-可操作 --success-color: #00a870; // 色彩-功能-成功 --warning-color: #ed7b2f; // 色彩-功能-警告 --error-color: #e34d59; // 色彩-功能-失败 --bg-color: #f0f2f5; // 色彩-背景 } // Less 变量定义时, 使用 CSS var @primary-color: var(--primary-color, #0052d9); // 色彩-品牌-可操作 @success-color: var(--success-color, #00a870); // 色彩-功能-成功 @warning-color: var(--warning-color, #ed7b2f); // 色彩-功能-警告 @error-color: var(--error-color, #e34d59); // 色彩-功能-失败 // 背景色 @bg-color: var(--bg-color, #f0f2f5); // 色彩-背景 // 在此直接修改样式 // 在 page 下的 wxss 修改, 会修改该页面组件的样式 // 在 app.wxss 中修改, 影响全局主题样式 // page 下的 wxss 权重大于 app.wxss page { --primary-color: #f36d78; --bg-color: #f1f3ff; } .t-button { color: @primary-color; background-color: @bg-color; }
编译后的代码
page { --primary-color: #0052d9; --success-color: #00a870; --warning-color: #ed7b2f; --error-color: #e34d59; --bg-color: #f0f2f5; } page { --primary-color: #f36d78; --bg-color: #f1f3ff; } .t-button { color: var(--primary-color, #0052d9); background-color: var(--bg-color, #f0f2f5); }
No branches or pull requests
建议:
使用css3的变量函数 var(--) 来自定义。
以Button按钮组件为例子:
开发者如果想自定义背景色(background-color)、字体色(color)、边框(border)
现阶段是样式覆盖,经测试需要加 !important 才能覆盖以上样式,个人感觉写法有点不爽
如果使用css3的变量函数 var(--) ,按照以下写法,个人感觉合理,希望能被采纳
组件内部写法 :
组件外部自定义时:
The text was updated successfully, but these errors were encountered: