:root的使用方式

2020-11-27 398 阅读1分钟

:root

:root 这个 CSS 伪类匹配文档树的根元素。对于 HTML 来说，:root 表示 <html> 元素，除了优先级更高之外，与 html 选择器相同。

用途

可以用来规范页面样式
方便根据不同场合更换/定制页面样式，达到代码复用的目的

示例

// 某css文件，以顶层css文件文件，app.css
:root {
  --text-level1: 38rpx;
  ---text-level2: 28rpx;
}

其中`--main-color`,`--pane-padding`为css变量，可在其余css文件中使用

用法1

// 其余页面或组件css文件，page/index/index.css
.title {
  font-size: var(--text-level1)
}
.subtitle {
  font-size: var(---text-level2)
}

用法2

// 其余页面或组件css文件，page/index/index.css
.title {
  font-size: var(--text-level1, 24rpx)
}
.subtitle {
  font-size: var(---text-level2, 24rpx)
}

var()的第二个参数表示变量的默认值