vant 带关闭按钮div_[已解决]vant-ui源码vant-button的几个疑问

业务背景

用了uni-app一年啦,但是没有通用的ui框架,就想着自己仿vant-weapp,适配一下uni-app,能够在各个端上用

这两天把button仿下来,但是里面有几个地方还存在疑问,

关于css

为什么要使用新的css变量?

在package/common/style/theme.less文件下面

好多css属性值都被替换成了原生变量了var(--$1, @{$1})

可实际上,我在vant小程序示例里面,并未发现全局定义的css变量

作者的目的是啥呢?

完整代码

@import (reference) './var.less';

.theme(@property, @imp) {

@{property}: e(replace(@imp, '@(\[^() \]+)', '@{$1}', 'ig'));

@{property}: e(replace(@imp, '@(\[^() \]+)', 'var(--$1, @{$1})', 'ig'));

}

问题解决

在我观察到的示例代码里面,确实没有传全局变量

或许这个是他们内部项目用的,反正给了一个降级色,无所谓了

hairline细边框的原理是啥?

以前未接触到细边框的需求

搜索了一圈都只是介绍怎么实现细边框

但是未涉及原理

这一缩放怎么就把1px变成了.5px了呢...懵逼

相关代码

.van-hairline--bottom:after, .van-hairline--le