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-stepper 无法输入小数点 HOT 3
- @waney 是指,选中后,滑动tabs,仍希望选中项在可视区域内吗? HOT 1
- [Tabs 选项卡] show-bottom-line(是否展示底部激活线条)是false值时,希望可以像true值时一样,内容自动向中间滑动。 HOT 1
- [Tabs 选项卡] 希望增加内容对齐方式,现在默认上下居中,希望可以增加顶部对齐,底部对齐方式 HOT 2
- [Grid 宫格] 当column(每一行的列数量)设置为0时,可滚动状态下,存在scroll-view组件默认滚动条,未提供api控制是否显示滚动条 HOT 3
- [t-avatar] 希望size支持百分比设定 HOT 2
- 请问什么时间能支持Skyline引擎? HOT 2
- [t-swipe-cell] 在 IOS 真机上无法滑动,开发者工具模拟器中正常滑动 HOT 2
- [Search] 搜索框 Action 放置在搜索框内,而不是独立出来 HOT 1
- [picker] picker在IOS真机下出下被遮住问题,可能与scroll-view有关 HOT 1
- [TabBar] 微信开发者工具警告 Some selectors are not allowed in component wxss HOT 3
- [组件名称] 组件样式 bug HOT 3
- [Tabs 选项卡&Grid 宫格] PC端只能选中滚动条滑动 HOT 1
- [popup] 跳转页面后关闭popup,但是还存在于页面上层 HOT 1
- t-textarea bind:change增加cursor返回 HOT 1
- [Tabs 选项卡] 设置 value 后,不会自动滑动 HOT 1
- [Fab 悬浮按钮] 建议像其他组件增加外部样式类 HOT 1
- [Cascader 级联选择器] 是否可以再左上角增加一个插槽 HOT 1
- [Guide 引导] 逐步骤进行指引或解释说明的组件 HOT 1
- [Watermark 水印] 希望增加水印功能组件 HOT 1
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.