css var & font-size bug #2137
Description
css var & font-size bug
label css var & font-size bug
online demo
what's wrong with?
- the
h1is ok,font-size: var(--fs)*2;; - the
spanis not work,font-size: var(--fs)*2;.
<!DOCTYPE html>
<html lang="zh-Hans">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>webpack3</title>
<link rel="stylesheet" href="./index.css">
</head>
<body>
<section>
<header>
<h1>hello, wp3!</h1>
<span data-fs="font-size">this is a big font span!</span>
</header>
</section>
</body>
</html>@charset "UTF-8";
/* var & css */
:root {
--fontSize: 12px;
--font-family: "Microsoft YaHei", sans-serif;
--fs: 16px;
--red: #f00;
--green: #0f0;
}
h1 {
/* font-size: var(--fontSize)*2; */
font-size: var(--fs)*2;
color: var(--red, red);
}
span[data-fs="font-size"] {
/* font-size: var(--fs)*2; */
font-size: var(--fontSize)*2;
/* font-size: 23px; */
color: var(--green);
}