Welcome, Old Sport!

初步了解css变量var (Variables)

by ilikecss ON 2017/10/16 624

初步了解css变量var (Variables)普通css也有变量规则了,没错,就是它var()!只要有一定css基础很快可以认识和初步掌握css变量的使用方法。var() 函数可以代替元素中任何属性中的值的任何部分。var()方法不能作为属性名、选择器或者其他除了属性值之外的值。

深海鱼男本田翼

变量的定义

--variableName: variableValue;

variableName表示自定义变量名,variableValue表示属性值。第一个参数是要替换的自定义属性的名称。函数的可选第二个参数用作回退值。如果第一个参数引用的自定义属性无效,则该函数将使用第二个值。这都是一些官方的说法,实际看下例子:

.demo {
	--color-link: #ff963b;
	--color-link-hover: #ffffff;
	--color-title: #ffffff;
	--color-subtitle: #5f5f5f;
	--font-alt: 200 6vw/1 'Nunito', serif;
	--color-next: #9f5f5f;
	--color-next-hover: #8544da;
}

上面我定义了几个变量名字,可以实际带入到网页局部css中调用,如下:

.content__title {
	font: var(--font-alt);
	color: var(--color-title);
}

这里.content__title的样式就会调入我最上面定义的”–font-alt”,”–color-title”的样式。具体参考我的DEMO。

css var的兼容性做的还算不错:

css-variables-stylesheets

2条评论
  1. #1

    豆子说道:

    哦,看得眼花

  2. #2

    seo博客说道:

    看不太懂,水平不够,我只会一点皮毛 :neutral:




TOP