css自定义属性—css变量

Posted 2021-10-08 bounsail

变量的声明和使用

1. 声明： --variable-name: variable-value;
声明变量时，变量名前面要加两根连词线（--）。
变量名大小写敏感，--header-color和--Header-Color是两个不同变量。

:root{
    --color: red;
}

2. 使用：使用var(变量名)来使用一个变量

#div {
    color: var(color)
}

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

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

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

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

可与正常属性混用

:root {
  --main-color: #c06;
  --accent-background: linear-gradient(to top, var(--main-color), white);
}

3. 变量组合使用
可以组合使用：当变量的值是字符串时，可以直接拼接，如下

:root{
  --screen-category: \'category\'  //变量值是字符串
}
body:after {
  content: \'--screen-category: \'var(--screen-category);  // 直接拼接
}

当变量的值是数值时，必须使用calc()函数计算，就算还是简单的单位拼接

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

.foo {
  --gap: 20;
  margin-top: calc(var(--gap) * 1px);
}

如果变量值带有单位，就不能写成字符串。

/* 无效 */
.foo {
  --foo: \'20px\';
  font-size: var(--foo);
}

/* 有效 */
.foo {
  --foo: 20px;
  font-size: var(--foo);
}

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

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

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

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

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

二、继承和作用域

1. 作用域
使用:root{}来定义全局变量
想让变量在局部可用，就定义在某个特定的选择器下

:root{
  color: red; //全局可用
}
.box {
  --1: #369;  //只在.box这个作用域可用 
}
body {
  background-color: var(--1, #cd0000);
}

三、兼容性处理

对于不支持 CSS 变量的浏览器，可以采用下面的写法。

a {
   color: #7F583F;
   color: var(--primary);
} 

也可以使用@support命令进行检测。

@supports ( (--a: 0)) {
  /* supported */
}
@supports ( not (--a: 0)) {
  /* not supported */
}

四、js操作css变量

javascript 也可以检测浏览器是否支持 CSS 变量。

const isSupported =
  window.CSS &&
  window.CSS.supports &&
  window.CSS.supports(\'--a\', 0);

if (isSupported) {
  /* supported */
} else {
  /* not supported */
}

JavaScript 操作 CSS 变量的写法。

// 设置变量 
document.body.style.setProperty(\'--primary\', \'#7F583F\');
// 读取变量 
document.body.style.getPropertyValue(\'--primary\').trim(); // \'#7F583F\'  
// 删除变量 
document.body.style.removeProperty(\'--primary\');

那些对 CSS 无用的信息，也可以放入 CSS 变量。

  --foo: if(x > 5) this.width = 10; 

上面代码中，--foo的值在 CSS 里面是无效语句，但是可以被 JavaScript 读取。这意味着，可以把样式设置写在 CSS 变量中，让 JavaScript 读取。

所以，CSS 变量提供了 JavaScript 与 CSS 通信的一种途径。

五、与预处理器(sass,less)比较

1. css变量：

动态性，可以在运行时更改
可以方便地从js读写 
可继承，可组合，有作用域 

2. 预处理器：

预处理器的变量不是动态的，在运行时不可更改
预处理器的变量没有作用域的说法
不能与js交互

六、常用场景

1. 为风格统一而使用颜色变量
2. 一致的组件属性（布局，定位等）
3. 避免代码冗余(响应式布局，制动动画)