CSS中关于变量的基本教程

时间：2021-05-08

CSS中的变量给了我们诸多优点：方便、代码重用、更可靠的代码库和提升防错能力。
示例

CSS Code复制内容到剪贴板
  • :root{
  • --base-font-size:16px;
  • --link-color:#6495ed;
  • }
  • p{
  • font-size:var(--base-font-size);
  • }
  • a{
  • font-size:var(--base-font-size);
  • color:var(--link-color);
  • }

    • 基础

    当使用CSS变量时，你应该了解的三个主要组成：

    自定义属性
    var()函数
    :root伪类

    自定义属性

    你已经知道了一些CSS的标准属性，如color,margin,width和font-size。
    下面的示例使用了CSS的color属性：

    CSS Code复制内容到剪贴板
  • body{
  • color:#000000;
  • }

    • 自定义属性仅意味着我们（创建CSS文件的人）去定义属性的名字。
    为了自定义一个属性名，我们需要用--作为前缀。
    如果我们要创建一个值为黑色的、名为text-color的自定义属性，可以这样做：

    CSS Code复制内容到剪贴板
  • :root{
  • --text-color:#000000;
  • }

    • var()函数

    为了应用自定义属性，需要利用var()函数，否则浏览器不知道他们代表什么。
    如果想要在p、h1和h2中的样式中使用--text-color，可以这样使用var()函数：

    CSS Code复制内容到剪贴板
  • :root{
  • --text-color:#000000;
  • }
  • p{
  • color:var(--text-color);
  • font-size:16px;
  • }
  • h1{
  • color:var(--text-color);
  • font-size:42px;
  • }
  • h2{
  • color:var(--text-color);
  • font-size:36px;
  • }

    • 其等价于：

    CSS Code复制内容到剪贴板
  • p{
  • color:#000000;
  • font-size:16px;
  • }
  • h1{
  • color:#000000;
  • font-size:42px;
  • }
  • h2{
  • color:#000000;
  • font-size:36px;
  • }

    • :root伪类

    我们需要一个地方来放置自定义属性。虽然可以在任何样式规则中指定自定义属性，但到处定义属性并不是一个好主意，这对CSS的可维护性和可阅读性是一个挑战。

    :root 伪类代表了HTML文档的根元素，这是一个放置自定义属性的好位置，因为我们可以通过其他更具特异性的选择器来覆盖自定义属性值。
    CSS变量的好处
    可维护性

    在一个Web开发项目中，我们经常重复使用一个特定的CSS属性值：

    CSS Code复制内容到剪贴板
  • h1{
  • margin-bottom:20px;
  • font-size:42px;
  • line-height:120%;
  • color:gray;
  • }
  • p{
  • margin-bottom:20px;
  • font-size:18px;
  • line-height:120%;
  • color:gray;
  • }
  • img{
  • margin-bottom:20px;
  • border:1pxsolidgray;
  • }
  • .callout{
  • margin-bottom:20px;
  • border:3pxsolidgray;
  • border-radius:5px;
  • }

    • 当需要改变某些属性值时，问题就会暴露出来了。
    如果我们手动的改变属性值，尤其是当CSS文件很大时，不仅会花费大量时间，还可能会范一些错误。同样的，如果我们执行一个批处理查找和替换,就可能会无意中影响其他样式规则。
    我们可以使用CSS变量重写：

    CSS Code复制内容到剪贴板
  • :root{
  • --base-bottombottom-margin:20px;
  • --base-line-height:120%;
  • --text-color:gray;
  • }
  • h1{
  • margin-bottom:var(--base-bottombottom-margin);
  • font-size:42px;
  • line-height:var(--base-line-height);
  • color:var(--text-color);
  • }
  • p{
  • margin-bottom:var(--base-bottombottom-margin);
  • font-size:18px;
  • line-height:var(--base-line-height);
  • color:var(--text-color);
  • }
  • img{
  • margin-bottom:var(--base-bottombottom-margin);
  • border:1pxsolidgray;
  • }
  • .callout{
  • margin-bottom:var(--base-bottombottom-margin);
  • border:1pxsolidgray;
  • border-radius:5px;
  • color:var(--text-color);
  • }

    • 假设你现在的客户说由于文本颜色太亮，导致文本难以阅读，想要改变文本颜色，此时，我们只需要更新一行CSS规则：

    CSS Code复制内容到剪贴板
  • --text-color:black;

    • 提高CSS的可读性

    自定义属性会使样式表更加易读，也会使CSS属性声明更有语义。
    将这个声明

    CSS Code复制内容到剪贴板
  • background-color:yellow;

    • 和下面的声明比较一下

    CSS Code复制内容到剪贴板
  • background-color:var(--highlight-color);
  • font-size:var(--base-font-size);

    • 像yellow和18px一类的属性值并没有给我们任何有用的上下文信息，但是当我们阅读如--base-font-size和--highlight-color一样的属性名时，即便在其他人的代码，我们都能马上知道这个属性值是在做什么。
    要注意的事
    大小写敏感

    自定义属性是大小写敏感的（和普通的CSS规则不一样）

    CSS Code复制内容到剪贴板
  • :root{
  • --main-bg-color:green;
  • --MAIN-BG-COLOR:RED;
  • }
  • .box{
  • background-color:var(--main-bg-color);
  • }
  • .circle{
  • BACKGROUND-COLOR:VAR(--MAIN-BG-COLOR);
  • border-radius:9999em;
  • }
  • .box,
  • .circle{
  • height:100px;
  • width:100px;
  • margin-top:25px;
  • box-sizing:padding-box;
  • padding-top:40px;
  • text-align:center;
  • }

    • 自定义属性值的解析

    当重复声明自定义属性时，其赋值遵循通常的CSS层叠和继承规则。例如下面的示例：
    HTML

    XML/HTML Code复制内容到剪贴板
  • <body>
  • <divclass="container">
  • <ahref="">Link</a>
  • </div>
  • </body>

    • CSS

    CSS Code复制内容到剪贴板
  • :root{
  • --highlight-color:yellow;
  • }
  • body{
  • --highlight-color:green;
  • }
  • .container{
  • --highlight-color:red;
  • }
  • a{
  • color:var(--highlight-color);
  • }

    • 当移除.container规则时，链接的颜色值将是green。
    回退值

    当使用var()函数时，可以分配一个回退的属性值，其作为一个额外参数和第一个参数用,隔开。看下面的示例：
    HTML

    XML/HTML Code复制内容到剪贴板
  • <divclass="box">ABox</div>

    • CSS

    CSS Code复制内容到剪贴板
  • div{
  • --container-bg-color:black;
  • }
  • .box{
  • width:100px;
  • height:100px;
  • padding-top:40px;
  • box-sizing:padding-box;
  • background-color:var(--container-bf-color,red);
  • color:white;
  • text-align:center;
  • }

    • 因为给var()传递了一个回退值参数，所以div的背景色最中被渲染成红色。
    无效值

    谨防给CSS属性分配错误类型的值。
    在下面的示例中，由于自定义属性--small-button被赋予一个长度单位，它被用在.small-button样式中是无效的(译者注：因为color的属性类型值出错)

    CSS Code复制内容到剪贴板
  • :root{
  • --small-button:200px;
  • }
  • .small-button{
  • color:var(--small-button);
  • }

    • 避免这种情况的一个好方式是想出具有描述性的自定义属性名称。例如将上面的自定义属性命名为--small-button-width
    浏览器对CSS变量的支持

    CSS变量用起来很方便，但是浏览器对其支持情况不太好：

    声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

    相关文章