您现在的位置是：网站首页> 编程资料编程资料

你真的需要了解一下CSS变量 var()的用法通过CSS变量修改样式的方法示例css文件中的样式类被覆盖，js文件中的变量未定义问题CSS变量对JS交互组件开发带来的提升与变革示例代码详解

2021-09-04 929人已围观

简介 当Web项目变得越来越大时，他的CSS会变得像天文数字那么大而且还变得混乱。为了帮助我们解决这个问题，新的CSS变量很快就会出现在主流浏览器中，这篇文章主要介绍了你真的需要了解一下CSS变量 var()的用法，感兴趣的小伙伴们可以参考一下

当Web项目变得越来越大时，他的CSS会变得像天文数字那么大而且还变得混乱。为了帮助我们解决这个问题，新的CSS变量很快就会出现在主流浏览器中，它让开发人员能够重用并轻松编辑重复出现的CSS属性。用过SASS或Less的人应该知道他的变量功能有多棒，但这些变量是预处理器，需要在使用前进行编译。现在变量在vanilla CSS中可用，您可以立即在浏览器中使用它们！

定义和使用CSS变量

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

 :root { --awesome-blue：＃2196F3; }

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

 .element { background-color:var(--awesome-blue); }

浏览器支持

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

示例1 – 主题颜色

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

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

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

 * {margin: 0;padding: 0;box-sizing: border-box;}html {padding: 30px;font: normal 13px/1.5 sans-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: 15px 0;}button {font-size: 13px;padding: 8px 12px;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: 2px solid var(--primary-color); } button { color: var(--accent-color); border: 1px solid var(--accent-color); }
对话框窗口
过放荡不羁的生活，容易得像顺水推舟，但是要结识良朋益友，却难如登天。

示例地址

示例2 – 属性类名可读性

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

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

 html{background-color: #F9F9F9;} ul{padding: 20px;list-style: none;width: 300px;} li{font: normal 18px sans-serif;padding: 20px;transition: 0.4s;margin: 10px;color: #444;background-color: #fff;cursor: pointer;} :root{ --tiny-shadow: 0 2px 1px 0 rgba(0, 0, 0, 0.2); --animate-right: translateX(20px); } li{ box-shadow: var(--tiny-shadow); } li:hover{ transform: var(--animate-right); } 
  • 我在这里!
  • 我在这里!
  • 我在这里!

示例地址

示例3 – 动态更改变量

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

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

 *{margin: 0;padding: 0;box-sizing: border-box;} html{background: #eee;padding: 30px;font: 500 14px sans-serif;color: #333;line-height: 1.5;} .blue-container{background: #64B5F6;padding-left: 50px;} .green-container{background: #AED581;padding-left: 50px;} .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); } 
这是个标题
将鼠标悬停在不同的颜色区域上可以更改此文本和标题的大小。

示例地址

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

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

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

可以嵌套自定义属性：

  • –base-color: #f93ce9;
  • –background-gradient: linear-gradient(to top, var(–base-color), #444);

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

  • –container-width: 1000px;
  • max-width: calc(var(–container-width) / 2);

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

上一篇：css多种方式实现等高布局的示例代码css设置多列等高布局的方法示例前端应该掌握的CSS实现多列等高布局技巧利用CSS3的flexbox实现水平垂直居中与三列等高布局浅析CSS等高布局的6种方式用CSS实现三列DIV等高布局以传达更好的视觉效果多列等高的CSS实现代码CSS 三栏等高布局实现方法CSS实例：CSS实现的等高网页布局CSS实例:三列等高布局-CSS教程-网页制作-网页教学网

下一篇：css3实现元素环绕中心点布局的方法示例css3中transform属性实现的4种功能详解CSS3.0(Cascading Style Sheet) 层叠级联样式表纯CSS3实现div按照顺序出入效果CSS3实现列表无限滚动/轮播效果css3 利用transform-origin 实现圆点分布在大圆上布局及旋转特效CSS3实现的侧滑菜单CSS3实现的3D隧道效果用CSS3画一个爱心css3 实现文字闪烁效果的三种方式示例代码六种css3实现的边框过渡效果

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网