CSS变量，这可是“十八般兵器”里新出炉的一招，让网页设计变得更酷炫自如！平时咱们做网页总得调整些什么颜色啊、字号之类的，而CSS变量就让这个过程变得简单又省心。从基本玩法到高级技巧，小编就来给你讲透彻，来，给你上一课~
1. CSS变量基础概念
<pre class="brush:css;toolbar:false;”>p {
–color:red !important;
color:var(–color);
color:blue;
}
css变量，也叫自定义属性，就是个装着值的小箱子，用个var()函数就能找出来。给根元素加个变量，就能在整个页面里随便用！举个栗子，给根节点加上”–main-color:#333;”,再在别的地方用var(–main-color)，就能调用那个颜色了~
p {
color: red !important;
color: blue;
}
CSS变量这个功能能存各种属性，比如色彩，字号，还有一些特别的属性，像边框，阴影什么的。这样我们做网页设计时就能随心所欲地调个性！
p {
color: red;
color: blue;
}
你知道吗？CSS样式表里的变量功能支持它们的自有属性继承和顺延，这样，用它配合文档流就能够很方便地利用和传输变量数值了。简单说就是，通过这个，我们对页面风格的调整可变得更轻松、更有效率！
p {
--color: red !important;
--color: blue;
color: var(--color);
}
2. CSS变量与!important
p{
--color: red !important;
--color: blue;
color:var(--color); color: pink;
}
跟普通属性一样，你也能用!important给CSS变量设优先级。不过别忘了，这个技巧用到自定义属性时，效果可就没那么明显了！原因是浏览器在处理这些带有!important的属性时，会直接无视它们！
比如说你给一个东西设定了–text-color: red!important;，然后在这儿再用var(–text-color)，表面上看文字变红了，其实浏览器根本不管什么!important，就是把它当做正常属性来看待。
:root {
--url:"https://picsum.photos/id/1/200/300";
}
.box {
background:url(var(--url));
}
3. CSS变量的条件处理
:root {
--url:url("https://picsum.photos/id/1/200/300");
}
.box {
background:var(--url);
}
除了普通属性继承和级联规则，你知道吗？CSS变量还有一个很棒的功能就是它能根据情况做特效，比如配合@media这样的条件规则就能调控不同场合的样式了。这下子，不论是手机还是电脑，或者是什么状况下，都轻松做到不一样的外观！
你可以设定好各种情况下的变量取值，然后轻轻一点就让页面的样式随着响应式设计或者特别的交互变化，这样操作起来简单又直白。这对我们维修页面和提升用户体验可是有大好处的！
4. CSS变量与url()函数
.box {
background: red;
background: linaer-gradient(red, blue);
}
用url()函数的时候要特别留意跟CSS变量搭档的问题！这个家伙在浏览器里分析起来有点儿让人费劲，搞起动态赋值来，说不定就给你冒出点儿你意想不到的事来。
有种情况，就是你得把整个url()函数赋值给个变量，这时候就得小心了，别弄错了导致网页出故障。建议去看看相关的教程或者文档，以防万一，别让解析出错给你好看~
.box {
--color:red;
background: var(--color);
background: linaer-gradient(var(--color), blue);
}
5. CSS变量计算值时间
在浏览网页时，CSS变量的属性值要等到”计算值时间”才会被搞清楚，这就等同于说，浏览器得先明白变量里是什么东西，然后才能算出它到底是啥数值。
比如，这个级联作用中，在没确定你设定的属性值具体代表啥意义前，浏览器都默认它有效！这就保证了你看到的网页样式计算得准确又稳定~
6. CSS变量动画与渐变
最初 CSS 变量不能进行动画，不过加了个叫’@property’的东西就行！这样子，CSS 变量就能做出一些简易动画和渐变。
虽然现在浏览器对这个支持度不高，但是科技进步和标准不断变化，说不定以后就有越来越多用处了，比如说CSS变量动画和渐变。
.box {
--color:10px; /* a "valid" variable */
background: red; /* a "valid" declaration */
background:linear-gradient(var(--color),blue); /* a "valid" declaration that will override the first one */
/* The result is an "invalid" value ... */
}
7. CSS变量注意事项
用CSS变量的时候，别把它当普通编程语言里的那种变量看待！原因，就是这个CSS变量有自己特别的规则和玩法儿，跟别的不太一样。
还有，需要小心处理空值、继承和级联那些事，免得出意外。建议你们依据项目需求恰当地用CSS变量，别太依赖复杂的逻辑处理。
:root {
--p: 10px;
}
.box {
padding: var(--p);
}
8. CSS变量传递规则
:root {
--p: 10;
}
.box {
padding: calc(var(--p)*1px);
}
记住，CSS参数是从上层往下传的。也就是说，顶部的元素设置的变量会变成下方的元素的属性，但反过来却不行。这样能够使网页的布局明了且不混乱~
就拿线性渐变（linear-gradient）来说，比如像这样的语句“var(–c1),var(–c2)”。要是你在这里用到了–c1但忘了提前定义它的话，那么系统就会去看它的父级元素上有没有这个定义，而不是往下找子元素。
9.高级应用实例
除了最基本的用法，还有很多好玩的高级技巧等着你去尝试！比如用表情符号设定特殊含义的 CSS 变量，说不定能玩出来意外惊喜呢
虽然这种高级用法不是常见的，真正用到的地方不多，但是理解这些理论和可能很有用，能让你更好地理解CSS变量的巨大潜力，还有助于为你未来的开发工作开阔新的视野。
.box {
border:2px solid red;
}
.item {
--b:inherit;
border:var(--b);
}
10.总结与展望
看了这篇文章关于CSS变量的详细讲解后，你应该对这个东西有更深的了解了？在平常的网页设计中用到它，可以让代码质量更好、速度更快，网站的外观控制也会变得简单方便！
以后，随着科技越来越厉害，规定也变得更好了，我觉得CSS变量肯定可以用得更广更深，这样就能给网页设计带来好多新鲜感和可能性哦～希望大家能把这门学问好好学透，然后灵活运用到生活中去，多找找新方法出来
.box {
--b:5px solid blue; /* we define the variable on the parent */
}
.item {
--b:inherit; /* the child will inherit the same value so "5px solid blue"*/
border:var(--b); /* we will have "5px solid blue" */
}
。
评论0