当前位置: 首页 > 科技观察

使用CSS变量让你的代码更优雅

时间:2023-03-13 04:01:15 科技观察

CSS变量基础知识这是对CSS基本语法的介绍。看懂了可以直接跳到实际demo。既然是变量,就很像JS变量,分为声明、使用、作用域。声明变量[via--connect变量名]::root{--test:red;}使用变量[var(变量名)读取变量]:.test{color:var(--foo);}作用域优先最高级别的选择器声明生效。适配iphonex刘海屏苹果在iPhoneX发布后引入了一个新概念:安全区域(SafeArea),安全区域是指屏幕中不受圆角、刘海、小等元素影响的可见窗口底部的黑条。如下图所示:如何适配这种屏幕,有2个步骤:在HTML中指定viewport-fit为cover,使页面满屏;在CSS中使用env()获取对应的安全区域。.safe-area{padding-top:env(safe-area-inset-top);padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right);padding-bottom:env(safe-area-inset-bottom);}由于兼容性,iOS11使用constant(),但从iOS11.2开始使用env()代替。如果用CSS变量实现(ChatUI源码实现),感觉还不错,如下:root{--safe-top:0px;--safe-bottom:0px;}@supports(top:constant(safe-area-inset-top)){:root{--safe-top:constant(safe-area-inset-top);--safe-bottom:constant(safe-area-inset-bottom);}}@supports(top:env(safe-area-inset-top)){:root{--safe-top:env(safe-area-inset-top);--safe-bottom:env(safe-area-inset-bottom);}}代码逻辑如下:首先定义两个CSS自定义变量--safe-top和--safe-bottom;使用@supports判断当前浏览器是否支持constant()/env();如果支持,将获取的值赋值给一个CSS自定义变量。然后就可以在需要用到的地方使用:.navbar{padding-top:var(--safe-top);}body{height:calc(100vh-var(--safe-bottom));}来实现1px边框也是一样。我们可能会用scss语法来实现前面的代码,会实现一个比较复杂的参数传递:@mixinretina-border($top:0,$right:0,$bottom:0,$left:0,$cor:#000000){}//调用@includeretina-border();如果使用css变量,代码会变得非常简单和灵活:.hairline{position:relative;}.hairline::after{content:'';位置:绝对;宽度:200%;高度:200%;border:0solidvar(--hairline-color,#f2f4f5);border-width:var(--hairline-width,1px);border-radius:calc(var(--hairline-radius)*2);指针事件:无;变换:比例(0.5);变换原点:00;使用如下:...

/*修改颜色*/.beidan{--hairline-color:#e9e9e9;}最后的css变量可以让你的代码更加灵活优雅,你可以看到所有主要的开源库都拥抱css变量,是时候抛弃scss了。