So I'm new to CSS custom properties, so when I wrote this I really thought the div colors would change to darker:
: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>I would like to use the same definition of the --background variable in different places, and just changing the --hue, --sat and --light where I want.
