Comments (2)
确实可以的,目前其他端已经使用了 CSS variables ,后续小程序也会采用这种方案。
如果有兴趣的话,可以一起参与改造~
from tdesign-miniprogram.
在组件自定义样式中定义变量, 确实是一个很新奇的想法, 避免了写 !important
我的想法是将 Less 变量声明全部使用上 var, 方便 app 或者 page 内全局替换, 而不仅仅使用 var 修改一个特定组件
不足之处请见谅!
起因
尝试将 Less 变量中的详细数值, 独立到 page(相当与网页的 :root) 中的 var 变量
- 在 page 下的 wxss 修改 var, 会影响该页面使用到指定 var 的全部组件样式, 以实现风格统一
- 在 app.wxss 中修改 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);
}
from tdesign-miniprogram.
Related Issues (20)
- [t-indexes] 搭配t-checkbox-group及t-checkbox索引无效 HOT 1
- TDesign 小程序版 popup 中 能用input 吗? HOT 2
- [Textarea] default-value不生效 HOT 1
- 使用background-color设置t-col背景颜色无效 HOT 1
- [TDesign] 1.3.1新版本控制台大量警告问题 HOT 5
- [Fab 悬浮按钮] demo与示例代码不一致 HOT 4
- [upload] 由1.3.0升级到1.3.1点击无法弹出选择图片 HOT 5
- DateTimePicker组件 希望支持给一个propr选项 使DateTimePicker组件可以平铺展示 HOT 1
- [Cascader] Cascader 无法使用懒加载,在现有demo 下如何实现lazy HOT 1
- [深色模式问题] 浅色模式下 --td-brand-color 设置无效 HOT 4
- [notice-bar] 怎么样获取到当前公告的内容 HOT 2
- 文档没有提供不显示按钮的演示示例代码 HOT 2
- [Calendar] 无法控制内部样式 HOT 2
- t-image-viewer 图片预览 HOT 1
- t-back-top 下拉不显示 HOT 4
- [t-upload] 上传组件示例,无法上传图片、无法删除图片、无法拖拽调整顺序 HOT 9
- [Calendar 日历] 日历无法选择当天的区间吗? HOT 3
- [t-text] 如何支持多行文本框显示滚动条 HOT 2
- [skyline] 所有组件都缺少 worklet 动画 HOT 3
- 使用iconfont时,前缀加了‘-’, 导致样式不生效 HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from tdesign-miniprogram.