定义和使用CSS变量

 

　　与任何其他CSS定义一样，变量遵循相同的范围和继承规则。使用它们的最简单方法是通过将声明添加到:root伪类来使它们全局可用，以便所有其他选择器都可以继承它。

 

　　html：

 

　　:root{

 

　　--awesome-blue：＃2196F3;

 

　　}

 

　　要访问变量中的值，我们可以使用var(…)语法。请注意，名称区分大小写，因此–foo!=–FOO。

 

　　.element{

 

　　background-color:var(--awesome-blue);

 

　　}

 

　　浏览器支持

 

　　常用的浏览器除了IE都完美支持，您可以在此处获取更多详细信息–[我可以使用CSS变量](https://caniuse.com/#search=var())。下面是几个例子，展示了CSS变量的典型用法。为确保它们正常工作，请尝试在我们上面提到的其中一个浏览器上查看它们。

 

　　示例1–主题颜色

 

　　当我们需要对多个元素一遍又一遍地应用相同的规则时，CSS中的变量是最有用的，例如主题中的重复颜色。我们不是每次想要重复使用相同颜色时进行复制和粘贴，而是将其放在变量中并从那里访问它。

 

　　现在，如果我们的客户不喜欢我们选择的蓝色阴影，我们可以在一个地方（变量的定义）改变样式来改变整个主题的颜色。没有变量，我们必须手动搜索和替换每一次出现。

 

　　可将代码复制下来在你的编辑器里面测试

 

　　

 

　　*{margin:0;padding:0;box-sizing:border-box;}html{padding:30px;font:normal13px/1.5sans-serif;color:#546567;background-color:var(--primary-color);}.container{background:#fff;padding:20px;}h3{padding-bottom:10px;margin-bottom:15px;}p{background-color:#fff;margin:15px0;}button{font-size:13px;padding:8px12px;background-color:#fff;border-radius:3px;box-shadow:none;text-transform:uppercase;font-weight:bold;cursor:pointer;opacity:0.8;outline:0;}button:hover{opacity:1;}

 

　　<!--分割线-->:root{

 

　　--primary-color:#B1D7DC;

 

　　--accent-color:#FF3F90;

 

　　}

 

　　html{

 

　　background-color:var(--primary-color);

 

　　}

 

　　h3{

 

　　border-bottom:2pxsolidvar(--primary-color);

 

　　}

 

　　button{

 

　　color:var(--accent-color);

 

　　border:1pxsolidvar(--accent-color);

 

　　}

 

　　<divclass="container">

 

　　<h3>对话框窗口</h3>

 

　　<p>过放荡不羁的生活，容易得像顺水推舟，但是要结识良朋益友，却难如登天。</p>

 

　　<button>确认</button>

 

　　</div>

 

　　示例2–属性类名可读性

 

　　变量的另一个重要用途是当我们想要保存更复杂的属性值时，我们不必记住它。最好的例子就是有多个参数，如CSS规则box-shadow，transform和font。

 

　　通过将属性放在变量中，我们可以使用语义可读的名称来访问它。

 

　　html{background-color:#F9F9F9;}

 

　　ul{padding:20px;list-style:none;width:300px;}

 

　　li{font:normal18pxsans-serif;padding:20px;transition:0.4s;margin:10px;color:#444;background-color:#fff;cursor:pointer;}

 

　　<!--分割线-->

 

　　:root{

 

　　--tiny-shadow:02px1px0rgba(0,0,0,0.2);

 

　　--animate-right:translateX(20px);

 

　　}

 

　　li{

 

　　box-shadow:var(--tiny-shadow);

 

　　}

 

　　li:hover{

 

　　transform:var(--animate-right);

 

　　}

 

　　<ul>

 

　　<li>我在这里!</li>

 

　　<li>我在这里!</li>

 

　　<li>我在这里!</li>

 

　　</ul>

 

　　示例3–动态更改变量

 

　　当多次声明自定义属性时，标准规则有助于解决冲突，样式表中最后定义的会覆盖上面定义的。

 

　　下面的示例演示了用户动态操作改变属性是多么容易，同时仍然保持代码清晰简洁。

 

　　

 

　　.container{background:#fff;padding:20px;}

 

　　p{transition:0.4s;}

 

　　.title{font-weight:bold;}

 

　　<!--分割线-->

 

　　.blue-container{

 

　　--title-text:18px;

 

　　--main-text:14px;

 

　　}

 

　　.blue-container:hover{

 

　　--title-text:24px;

 

　　--main-text:16px;

 

　　}

 

　　.green-container:hover{

 

　　--title-text:30px;

 

　　--main-text:18px;

 

　　}

 

　　.title{

 

　　font-size:var(--title-text);

 

　　}

 

　　.content{

 

　　font-size:var(--main-text);

 

　　}

 

　　<divclass="blue-container">

 

　　<divclass="green-container">

 

　　<divclass="container">

 

　　<pclass="title">这是个标题</p>

 

　　<pclass="content">将鼠标悬停在不同的颜色区域上可以更改此文本和标题的大小。</p>

 

　　</div>

 

　　</div>

 

　　</div>

 

　　[示例地址](https://codepen.io/w3cbest/pen/OrxLLE)

 

　　正如您所看到的，CSS变量非常简单易用，开发人员不必花费太多时间在各处开始应用它们。以下是扩展内容：

 

　　var()函数有两个参数，如果自定义属性失败，它可用于提供回退值：

 

　　width``:var(–custom-width,20%``);

 

　　可以嵌套自定义属性：

 

　　*–base-color:#f93ce9;

 

　　*–background-gradient:linear-gradient(totop,var(–base-color),#444);

 

　　变量可以与CSS的另一个新增功能-calc()函数结合使用。

 

　　*–container-width:1000px;

 

　　*max-width:calc(var(–container-width)/2);








本文转载自中文网