idea jsp引用css无效_刚知道纯css也可以定义变量，真香！

大家都知道css有calc()，可否知道:root{} 和 var()？

下面我就给大家介绍下他们：

1、变量的声明 :root{}

声明变量的时候，变量名前面要加两根连词线（--）。

body {
  --foo: #7F583F;
  --bar: #F7EFD2;
}

上面代码中，body选择器里面声明了两个变量：--foo和--bar。
它们与color、font-size等正式属性没有什么不同，只是没有默认含义。
所以 CSS 变量（CSS variable）又叫做**"CSS 自定义属性"**（CSS custom properties）。
因为变量与自定义的 CSS 属性其实是一回事。你可能会问，为什么选择两根连词线（**--**）表示变量？
因为$foo被 Sass 用掉了，@foo被 Less 用掉了，为了不产生冲突，官方的 CSS 变量就改用两根连词线了。
各种值都可以放入 CSS 变量，可以在一个CSS文件中定义全局变量，供多个属性引用。

: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: .35s;
  --external-link: "external link";
  --margin-top: calc(2vh + 20px);
}

**tips：**变量名大小写敏感，--header-color和--Header-Color是两个不同的变量。

2、var()函数

var() 函数用于读取变量，插入自定义的属性值，如果一个属性值在多处被使用，该方法就很有用。

a {
  color: var(--foo);
  text-decoration-color: var(--bar);
}

var() 函数还可以使用第二个参数，表示变量的默认值。如果该变量不存在，就会使用这个默认值。

color: var(--foo, #7F583F);

第二个参数不处理内部的逗号或空格，都视作参数的一部分。

var(--font-stack, "Roboto", "Helvetica");
var(--pad, 10px 15px 20px);

var()函数还可以用在变量的声明。

:root {
  --primary-color: red;
  --logo-text: var(--primary-color);
}

注意，变量值只能用作属性值，不能用作属性名。

.foo {
  --side: margin-top;
  /* 无效 */
  var(--side): 20px;
}

上面代码中，变量--side用作属性名，这是无效的。

calc()

calc() 函数用于动态计算长度值。

需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)；
任何长度值都可以使用calc()函数进行计算；
calc()函数支持 "+", "-", "*", "/" 运算；
calc()函数使用标准的数学运算优先级规则；

用法如下：

:root{
    --windowW:1000px;
    --windowH:1000px;
}
.father{
    width: var(--windowW);
    height: calc(var(--windowH)-100px);
}