IT博客汇
  • 首页
  • 精华
  • 技术
  • 设计
  • 资讯
  • 扯淡
  • 权利声明
    • 登录 注册

    【译】CSS中的变量使用详解

    dwqs发表于 2015-06-05 00:48:05
    love 0

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

    示例

    1. :root {
    2.   --base-font-size: 16px;
    3.   --link-color: #6495ed;
    4. }
    6. p {
    7.   font-size: var( --base-font-size );
    8. }
    10. a {
    11.   font-size: var( --base-font-size );
    12.   color: var( --link-color );
    13. }

    基础

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

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

    自定义属性

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

    1. body {
    2.   color: #000000; /* The "color" CSS property */
    3. }

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

    1. :root {
    2.   --text-color: #000000; /* A custom property named "text-color" */
    3. }

    var()函数

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

    1. :root {
    2.   --text-color: #000000;
    3. }
    5. p {
    6.   color: var( --text-color );
    7.   font-size: 16px;
    8. }
    10. h1 {
    11.   color: var( --text-color );
    12.   font-size: 42px;
    13. }
    15. h2 {
    16.   color: var( --text-color );
    17.   font-size: 36px;
    18. }

    其等价于：

    1. p {
    2.   color: #000000;
    3.   font-size: 16px;
    4. }
    6. h1 {
    7.   color: #000000;
    8.   font-size: 42px;
    9. }
    11. h2 {
    12.   color: #000000;
    13.   font-size: 36px;
    14. }

    :root伪类

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

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

    CSS变量的好处

    可维护性

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

    1. h1 {
    2.   margin-bottom: 20px;
    3.   font-size: 42px;
    4.   line-height: 120%;
    5.   color: gray;
    6. }
    8. p {
    9.   margin-bottom: 20px;
    10.   font-size: 18px;
    11.   line-height: 120%;
    12.   color: gray;
    13. }
    15. img {
    16.   margin-bottom: 20px;
    17.   border: 1px solid gray;
    18. }
    20. .callout {
    21.   margin-bottom: 20px;
    22.   border: 3px solid gray;
    23.   border-radius: 5px;
    24. }

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

    1. :root {
    2.   --base-bottom-margin: 20px;
    3.   --base-line-height:   120%;
    4.   --text-color:         gray;
    5. }
    7. h1 {
    8.   margin-bottom: var( --base-bottom-margin );
    9.   font-size: 42px;
    10.   line-height: var( --base-line-height );
    11.   color: var( --text-color );
    12. }
    14. p {
    15.   margin-bottom: var( --base-bottom-margin );
    16.   font-size: 18px;
    17.   line-height: var( --base-line-height );
    18.   color: var( --text-color );
    19. }
    21. img {
    22.   margin-bottom: var( --base-bottom-margin );
    23.   border: 1px solid gray;
    24. }
    26. .callout {
    27.   margin-bottom: var( --base-bottom-margin );
    28.   border: 1px solid gray;
    29.   border-radius: 5px;
    30.   color: var( --text-color );
    31. }

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

    1. --text-color: black;

    提高CSS的可读性

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

    1. background-color: yellow;

    和下面的声明比较一下

    1. background-color: var( --highlight-color );
    2. font-size: var( --base-font-size );

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

    要注意的事

    大小写敏感

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

    1. :root {
    2.   --main-bg-color: green;
    3.   --MAIN-BG-COLOR: RED;
    4. }
    6. .box {
    7.   background-color: var( --main-bg-color ); /* green background */
    8. }
    10. .circle {
    11.   BACKGROUND-COLOR: VAR(--MAIN-BG-COLOR ); /* red background */
    12.   border-radius: 9999em;
    13. }
    15. .box,
    16. .circle {
    17.   height: 100px;
    18.   width: 100px;
    19.   margin-top: 25px;
    20.   box-sizing: padding-box;
    21.   padding-top: 40px;
    22.   text-align: center;
    23. }

    自定义属性值的解析

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

    2.   
       class="container">
    3.      href="">Link
    4.

    CSS

    1. :root {
    2.   --highlight-color: yellow;
    3. }
    5. body {
    6.   --highlight-color: green;
    7. }
    9. .container {
    10.   --highlight-color: red;
    11. }
    13. a {
    14.   color: var( --highlight-color );
    15. }

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

    回退值

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

    1.  class="box">A Box

    CSS

    1. div {
    2.   --container-bg-color: black;
    3. }
    5. .box {
    6.   width: 100px;
    7.   height: 100px;
    8.   padding-top: 40px;
    9.   box-sizing: padding-box;
    10.   background-color: var( --container-bf-color, red );
    11.   color: white;
    12.   text-align: center;
    13. }

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

    无效值

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

    1. :root {
    2.   --small-button: 200px;
    3. }
    5. .small-button {
    6.  color: var(--small-button);
    7. }

    避免这种情况的一个好方式是想出具有描述性的自定义属性名称。例如将上面的自定义属性命名为--small-button-width

    浏览器对CSS变量的支持

    CSS变量用起来很方便，但是浏览器对其支持情况不太好：
    var supported
    或者戳此链接：var supported

    本文根据@Jacob Gube的《Introduction to CSS Variables》所译，整个译文带有我自己的理解与思想，如果译得不好或有不对之处还请同行朋友指点。如需转载此译文，需注明英文出处：http://sixrevisions.com/css/variables/。

    淡忘~浅思猜你喜欢

    【译】下一代选择器：CSS4
    如何实现CSS居中？--CSS居中常用方法
    css 字间距离_css 字体字符间距设置
    一些常被你忽略的CSS小知识
    一道关于CSS选择器优先级的题
    无觅

    转载请注明：淡忘~浅思 » 【译】CSS中的变量使用详解



沪ICP备19023445号-2号
友情链接