本文的目的主要是展示 CSS 变量是如何工作的. 随着 web 应用程序变得越来越大, CSS 变得越来越大, 越来越多, 而且很多时候都很乱, 在良好的上下文中使用 CSS 变量, 为您提供重用和轻松更改重复出现的 CSS 属性的机制.
在 "纯粹的"CSS 支持变量之前, 我们有像 Less http://lesscss.org/ 和 Sass https://sass-lang.com/ 这样的预处理器. 但是它们需要在使用前进行编译, 因此 (有时) 会增加额外的复杂性.
如何定义和使用 CSS 变量
从我们最熟悉的语言 JavaScript 开始: 在 JavaScript 中定义变量使用 vars.
要声明一个简单的 JavaScript var, 如下内容:
var mainColor = 'red';
要声明一个 CSS 变量, 您必须在该 var 的名称前添加一个双短划线. 例如:
- body{
- --color:red;
- }
现在, 为了使用 CSS 变量的值, 我们可以使用 var(...)函数. 如下:
- .demo{
- background:var(--color);
- }
管理 CSS 变量的最简单方法是将它们声明为: root 伪类. 鉴于 CSS 变量遵循规则, 就像任何其他 CSS 定义一样, 将它们放在: root 中将确保所有选择器都可以访问这些变量.
- :root{
- --color:red;
- }
- .demo{
- background:var(--color);
- }
- p{
- color:var(--color);
- }
浏览器支持 CSS 变量?
浏览器对 CSS 变量的支持还算不错的. 只是 IE 浏览器不支持. 想查看浏览器兼容性的可以点击这里 https://caniuse.com/#feat=css-variables , 那么您将看到所有主流浏览器都支持开箱即用的 CSS 变量. 无论是手机还是台式机.
CSS 变量的实质应用
示例 1 - 管理颜色
到目前为止, 使用 CSS 变量的最佳候选者之一是管理网页的颜色. 我们可以将它们放在变量中, 而不是一遍又一遍地复制和粘贴相同的颜色. 如果有人要求我们更新特定的绿色阴影或使所有按钮变为红色而不是蓝色, 那么只需更改该 CSS 变量的值, 就是这样. 您不必搜索和替换该颜色的所有实例.
列如:
CSS 代码
- /*css_vars.css*/
- :root {
- --primary-color: #ed6564;
- --accent-color: #388287;
- }
- 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);
- }
- p {
- color: var(--accent-color);
- }
- /*base.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 {
- margin:0 5px;
- 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;
- }
- .center {
- text-align: center;
- }
HTML 代码
- <div class="container">
- <h3 > 就业协议书</h3>
- <p > 就业协议书, 全称是全国普通高等学校毕业生就业协议书, 是由教育部高校学生司统一制订的. 根据国家规定, 在达成就业意向后, 毕业生, 用人单位, 学校三方必须签订全国普通高等学校毕业生就业协议书. 就业协议书是具有一定的广泛性和权威性, 是学校制订就业方案派遣毕业生, 用人单位申请用人指标的主要依据, 对签约的三方都有约束力.</p>
- <div class="center">
- <button > 查看详情</button><button > 取消</button>
- </div>
- </div>
点击查看运行结果. http://jsrun.net/WvgKp/edit
示例 2 - 删除重复的代码
通常, 您需要构建一些不同的组件变体. 相同的基本样式, 略有不同. 让我们使用一些颜色不同的按钮. 典型的解决方案是创建一个基类, 比如. btn 并添加变体类.
- .btn {
- border: 2px solid black;}
- .btn:hover {
- background: black;}
- .btn.red {
- border-color: red
- }
- .btn.red:hover {
- background: red
- }
现在使用它们像这样:
- <button class="btn">Hello</button>
- <button class="btn red">Hello</button>
但是, 这会添加一些代码重复. 在. red 变体上, 我们必须将 border-color 和 background 设置为红色.
这中情况可以使用 CSS 变量轻松修复. 如下:
CSS 代码:
- .btn{
- border-radius:4px;
- text-align:center;
- padding:.5em;
- margin-bottom:0.5em;
- background:#fff;
- border:1px solid var(--color, black);
- }
- .btn:hover{
- color:#fff;
- cursor:pointer;
- background:var(--color, black);
- }
- .btn.red{
- --color:red;
- }
- .btn.green{
- --color:green;
- }
- .btn.blue{
- --color:blue;
- }
HTML 代码:
- <div class="btn">HMOE</div>
- <div class="btn red">HMOE</div>
- <div class="btn green">HMOE</div>
- <div class="btn blue">HMOE</div>
示例 3 - 使一些属性可读
如果我们想要创建更复杂的属性值的快捷方式, CSS vars 非常适合使用, 因此我们不必记住它. CSS 属性, 如 box-shadow,transform 和 font 或其他带有多个参数的 CSS 规则就是完美的例子. 我们可以将属性放在变量中, 以便我们可以通过更易读的格式重用它.
例如:
- :root {
- --tiny-shadow: 4px 4px 2px 0 rgba(0, 0, 0, 0.8);
- --animate-right: translateX(20px);
- }
- li {
- box-shadow: var(--tiny-shadow);
- }
- li:hover {
- transform: var(--animate-right);
- }
例 4 - 级联变量
标准级联规则也适用于 CSS 变量. 因此, 如果多次声明自定义属性, 则 css 文件中最低的定义将覆盖其上方的定义. 下面的示例演示了动态操作用户操作的属性是多么容易, 同时仍然保持代码清晰简洁.
CSS_var.css 文件:
- .orange-container {
- --main-text: 18px;
- }
- .orange-container:hover {
- --main-text: 22px;
- }
- .red-container:hover {
- --main-text: 26px;
- }
- .title {
- font-size: var(--title-text);
- }
- .content {
- font-size: var(--main-text);
- }
- .container:hover {
- --main-text: 18px;
- }
base.css 文件:
- * {
- margin: 0;
- padding: 0;
- box-sizing: border-box;
- }
- html {
- background: #eee;
- padding: 30px;
- font: 500 14px sans-serif;
- color: #333;
- line-height: 1.5;
- }
- .orange-container {
- background: orange;
- }
- .red-container {
- background: red;
- }
- .red-container,
- .orange-container {
- padding-top: 10px;
- padding-left: 50px;
- }
- .container {
- background: blue;
- padding: 20px;
- color: white;
- }
- p {
- transition: 0.4s;
- }
- .title {
- font-weight: bold;
- }
index.html 文件:
- <html>
- <head>
- <link rel="stylesheet" type="text/css" href="base.css">
- <link rel="stylesheet" type="text/css" href="css_vars.css">
- </head>
- <body>
- <div class="orange-container">
- Hover orange to make blue bigger.
- <div class="red-container">
- Hover red to make blue even bigger.
- <div class="container">
- <p class="content">Hover on the different color areas to change the size of this text and the title.</p>
- </div>
- </div>
- </div>
- </body>
- </html>
点击查看运行结果. http://jsrun.net/LvgKp/edit
示例 5 - 具有 CSS 变量的主题切换器
CSS 变量的一个好处是它的反应性. 一旦我们更新它, 任何具有 CSS 变量值的属性也会更新. 因此, 只需几行 Javascript 和 CSS 变量的智能使用, 我们就可以制作一个主题切换器机制.
例如:
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <title > 具有 CSS 变量的主题切换器</title>
- <style>
- body {
- background-color: var(--bg, #b3e5fc);
- color: var(--bg-text, #37474f);
- font-family: sans-serif;
- line-height: 1.3;
- }
- .toolbar {
- text-align: center;
- }
- </style>
- </head>
- <body>
- <div class="toolbar">
- <button value="dark">dark</button>
- <button value="calm">calm</button>
- <button value="light">light</button>
- </div>
- <h2>Stackoverflow Question</h2>
- <p>I would like to use an external javascript file in another javascript file. For example, I could store all my global variables
- in a globals.js file and then call then from the website logic logic.js. Then in the index.html, i would insert the tag.
- How do I use the globals.js inside the logic.js?
- </p>
- <script>
- var root = document.documentElement;
- var themeBtns = document.querySelectorAll(".toolbar> button");
- themeBtns.forEach(function (btn){
- btn.addEventListener("click", handleThemeUpdate);
- });
- function handleThemeUpdate(e) {
- switch (e.target.value) {
- case "dark":
- root.style.setProperty("--bg", "black");
- root.style.setProperty("--bg-text", "white");
- break;
- case "calm":
- root.style.setProperty("--bg", "#B3E5FC");
- root.style.setProperty("--bg-text", "#37474F");
- break;
- case "light":
- root.style.setProperty("--bg", "white");
- root.style.setProperty("--bg-text", "black");
- break;
- }
- }
- </script>
- </body>
- </html>
点击查看运行结果 http://jsrun.net/wvgKp/edit
CSS 变量的使用提示
像 CSS 中几乎所有的东西一样, 变量也非常简单易用. 以下是一些未包含在示例中的提示, 但在某些情况下仍然非常有用:
1)css 变量区分大小写. 下面的示例是两个不同的变量:
- :root {
- --color: blue;
- --COLOR: red;
- }
2)当您使用 var()函数时, 您可以使用第二个参数. 如果找不到自定义属性, 将使用第二个参数为默认值:
width: var(--custom-width, 50%);
3)可以直接将 CSS 变量用于 HTML:
- <!--HTML-->
- <html style="--size: 600px">
- <!--CSS-->
- body {
- max-width: var(--size)
- }
4) 可以在其他 CSS var 中使用 CSS 变量:
- --base-red-color: #f00;
- --background-gradient: linear-gradient(to top, var(--base-red-color), #222);
5) 可以使用媒体查询使 CSS 变量成为条件. 例如, 以下代码根据屏幕大小更改填充的值:
- :root {
- --padding: 15px
- }
- @media screen and (min-width: 750px) {
- --padding: 30px
- }
6) 不要害怕在 clac() https://developer.mozilla.org/en-US/docs/Web/CSS/calc 函数中使用 CSS 变量.
- --text-input-width: 5000px;
- max-width: calc(var(--text-input-width) / 2);
当然, CSS 变量不是灵丹妙药. 不会解决你在 CSS 领域遇到的每一个问题. 但是, 使用它使您的代码更具可读性和可维护性. 此外, 它极大地改善了大型文档的易变性. 只需将所有常量设置在一个单独的文件中, 当您只想对变量进行更改时, 就不必跳过数千行代码.
来源: https://www.cnblogs.com/jofun/p/9258416.html