CSS变量 var()的用法是什么?

2024-01-17 15:56 小编
 定义和使用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);


Tag: 什么
在线咨询 拨打电话

电话

13363039260

微信二维码

微信二维码