css动态样式

1.css动态样式的定义

1.1 在声明css变量时，变量前面加--，读取变量时用var
  body {
        --foo: green;
        --bar: red;
      }
	a {
        color: var(--foo);
        text-decoration-color: var(--bar);
      }
<h1><a href="javascript:;">测试动态样式a>h1>

效果如下 ：

2.测试var函数变量声明

body{
	--primary-color: red;
    --new-color: var(--primary-color);
}
h2{
	color:var(--new-color)
}
<h2>测试var函数变量声明h2>

效果图如下

3 .公用样式的设置

// 公用样式都放在:root下面
 :root {
        --main-color: #4d4e53;
        --main-bg: rgb(255, 255, 255);
        --logo-border-color: rebeccapurple;

        --header-height: 68px;
        --content-padding: 10px 20px;

        --base-line-height: 1.428571429;
        --transition-duration: 0.35s;
        --external-link: "external link";
        --margin-top: calc(2vh + 20px);
      }