所以我是CSS自定义属性的新手,所以当我写这篇文章时,我真的以为div的颜色会变深:
:root {
--hue: 200;
--sat: 33%;
--light: 98%;
--background: hsl(
var(--hue),
var(--sat),
var(--light)
);
}
body {
background-color: var(--background);
}
div {
--light: 0;
background-color: var(--background);
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div>
<p>div</p>
<p>div</p>
</div>
</body>
</html>
我想在不同的地方使用相同的--background
变量定义,只是在需要的地方更改--hue
,--sat
和--light
。