乐趣区

关于css:css自定义属性css变量

jiezi

变量的申明和应用

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);

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. 防止代码冗余(响应式布局，制动动画)
退出移动版