在编写css公共样式的时候,我们都会声明很多通用的颜色、字号等。现在我们可以通过声明CSS变量来实现了
1.变量的声明
CSS变量声明是字母前加两个横线(--)如:
body{ --Colors:#dfdfdf; --fS16px:16px; }
上述代码中,body选择器中声明了Colors和fS16px两个变量。而使用‘--’是因为$被Sass占用了,@被Less占用了,所以是为了区分它们。
同时,你也可以用--root{}来存放所有变量,在下边使用的时候直接调用即可。如:
--root{ --Colors:#dfdfdf; --fS16px:16px; }
变量的声明对大小写敏感。如:colors和Colors表示两个不同的变量
2.var()函数
var函数用来读取变量
a{ color:var(--Colors) }
var()函数还可以使用第二个参数,表示变量的默认值。如果该变量不存在,就会使用这个默认值。
color: var(--Colors, #e5e5e5);
第二个参数不处理内部的逗号或空格,都视作参数的一部分。
var(--fontF, "Roboto", "Helvetica"); var(--Margins, 15px 20px 25px);
var()函数还可以用在变量声明中
--root{ --bgcolors:red; --fColor:var(--bgcolors) }
注意:变量只能作为属性值,不能作为属性名
3.变量值的类型
如果变量值是字符串,则可以与其他字符串拼接
--far:‘hello‘; --foo:var(--far)‘,world‘;
如果是数值,则不可以拼接
--far:20; --foo:var(--far)‘px‘; //无效
但可以通过calc()函数,将他们拼接起来
--far:20; --foo:calc(var(--far)*1px);
如果变量值带单位,则不能写成字符串形式
--far:‘20px‘; margin-top:var(--far); //无效 --far:20px; margin-top:var(--far); //有效
4.作用域
<style> :root { --color: blue; } div { --color: green; } #alert { --color: red; } * { color: var(--color); } </style> <p>蓝色</p> <div>绿色</div> <div id="alert">红色</div>
上面代码中,三个选择器都声明了--color
变量。不同元素读取这个变量的时候,会采用优先级最高的规则,因此三段文字的颜色是不一样的。
这就是说,变量的作用域就是它所在的选择器的有效范围。
所以一些通用的变量值,最好声明在--root{}内
时间: 2024-11-05 16:11:08