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

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；使用如下：...