css自定义变量

注意css自定义变量不兼容ie浏览器

基本使用

css自定义属性名需要以两个减号 -- 开头；属性值可以为任何有效的css值。

:root {
	--bg-color: red;
}

通常将css自定义属性定义在根伪类 :root ****下，这样就可以在 HTML 文档的任何地方访问到它。

在整个文档需要的地方使用，可以减少这样的重复性

使用var函数包裹css变量 在css中作为一个普通的css属性值使用

#div {
    background-color: var(--bg-color);
}

css变量备用值

var( css变量 ，备用值 ） 第二个参数可以进行嵌套

#div {
    background-color: var(--bg-color , #ccc);
}

.first {
  /* 当前文字的颜色为red，因为--color不在当前元素内，也不再当前父元素内 */
  color: var(--color, red);
  /* 当前文字的颜色为--main-text-color，如果--main-text-color不存在时，文字颜色为red */
  color: var(--color, var(--main-text-color, red));
  /* 当前文字的颜色为 red,white ，所以说var()只可以使用两个参数 */
  color: var(--color, red, white);
}

使用calc()进行属性值的计算

:root {
    --base-height: 10px;
}

margin: 0 0 calc(var(--base-height, 10px) * 1rem);

注意：

• 在一些浏览器中，针对CSS变量的复杂calc()可能不能工作。

• 不能使用CSS自定义属性作为CSS属性名称：var(--name): 10px;

• 不能作为媒体查询值使用：@media screen and (min-width: var(--media-min-width){

• 不能作为图片地址使用：url(var(--image-src))

在css中重置变量的值

:root {
    --bgcolor: #000;
    --color: #111;
}

.reset {
  	// 重置css变量值
    --bgcolor: #222;
    --color: #333;
    // 若不重置，则会继承全局的css变量值
    background: var(--bgcolor);
    color: var(--color);
}

在js中操作css变量

.div {
    --default-color: #fff;
    --color: #000;
}

// 在js中读取css变量值
const rootStyles = getComputedStyle(document.documentElement)
const varValue = rootStyles.getPropertyValue('--color').trim()

// 编辑css变量值
document.documentElement.style.setProperty('--color', '#111')

// 获取一个 Dom 节点上的 CSS 变量
element.style.getPropertyValue("--my-var");

// 获取任意 Dom 节点上的 CSS 变量
getComputedStyle(element).getPropertyValue("--my-var");

// 修改一个 Dom 节点上的 CSS 变量
element.style.setProperty("--my-var", jsVar + 4);

无效变量

当浏览器遇到无效的 var() 时，会使用继承值或初始值代替。

自定义属性的继承性

自定义属性会继承。这意味着如果在一个给定的元素上，没有为这个自定义属性设置值，在其父元素上的值会被使用。

大小写敏感

自定义属性的大小写是敏感 的，即**--my-color** 和 --My-color会被认为这是两个变量。

复杂值的用法

background-image: url(./image/avatar.png);

// 使用变量定义的时候不应该只定义./image/avatar.png，而是将整个值作为一个变量
--avatar: url('./image/avatar.png');
background-image: url(./image/avatar.png);