css 变量

最近要改个平台系统的界面，想着可以写公共的样式，后续便于维护,便想到了 css 变量，查看了一些资料

可惜可能不太支持IE ，没好用上~

不过我还是可以学习一下的

----优势：

  • 大多是为风格统一而使用颜色变量
  • 一致的组件属性（布局，定位，动作等）
  • 避免代码冗余，便于维护

一、变量的声明

声明变量的时候，变量名前面要加两根连词线（--）双横杠【注：英文状态下】

为什么选择两根连词线（--）表示变量？因为$被 Sass 用掉了，@被 Less 用掉了。为了不产生冲突，官方的 CSS 变量就改用两根连词线了

【变量名大小写敏感】

:root {
    --title-size:30px;
    --txt-size:16px;
    --primary-color: #ed6564;
    --accent-color: #388287;
    --tiny-shadow: 0 2px 17px 0 rgba(0, 0, 0, 0.2);
    --animate-right: translateX(20px);
}

 

 
二、函数引用

var()函数用于读取变量

===== var()函数还可以使用第二个参数，表示变量的默认值。如果该变量不存在，就会使用这个默认值。

 background: var(--primary-color, red);
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>css变量</title>
<link rel="stylesheet" href="base.css">
</head>
<body>
<div  class="box">
  我这里是按钮
</div>
<h2 class="title">Stackoverflow Question</h2>
<p class="parimay-text">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> 
</body>
</html>
*{margin: 0;padding: 0;box-sizing: border-box;}
html {padding: 30px;font: normal 13px/1.5}
:root {
    --title-size:30px;
    --txt-size:16px;
    --primary-color: #ed6564;
    --accent-color: #388287;
    --tiny-shadow: 0 2px 17px 0 rgba(0, 0, 0, 0.2);
    --animate-right: translateX(20px);
}
.box{
    width: 300px;
    height: 100px;
    background: var(--primary-color, red);
    box-shadow: var(--tiny-shadow);
}
.title{
    line-height: 30px;
    font-size: var(--title-size);
    color: var(--accent-color);
}
.parimay-text {
    line-height: 30px;
    font-size: var(--title-size);
    color: var(--primary-color);
}

第二个参数不处理内部的逗号或空格，都视作参数的一部分。

var(--font-stack, "Roboto", "Helvetica");
var(--pad, 10px 15px 20px);

var()函数还可以用在变量的声明。

    :root {
      --primary-color: red;
      --logo-text: var(--primary-color);
    }
// 注：变量值只能用作属性值，不能用作属性名。
.fun {
  --side: margin-top;
  /* 无效 */
  var(--side): 20px;
}
三、作用域

同一个 CSS 变量，可以在多个选择器内声明。读取的时候，优先级最高的声明生效。这与 CSS 的"层叠"（cascade）规则是一致的.

三个选择器都声明了--color变量。不同元素读取这个变量的时候，会采用优先级最高的规则，因此三段文字的颜色是不一样的。

 <style>
      :root { --color: blue; }
      div { --color: green; }
      #alert { --color: red; }
      * { color: var(--color); }
    </style>

    <p>蓝色</p>
    <div>绿色</div>
    <div id="alert">红色</div>

四、响应式布局

    body {
      --primary: #7F583F;
      --secondary: #F7EFD2;
    }

    a {
      color: var(--primary);
      text-decoration-color: var(--secondary);
    }

    @media screen and (min-width: 768px) {
      body {
        --primary:  #F7EFD2;
        --secondary: #7F583F;
      }
    }

五、兼容性处理

对于不支持 CSS 变量的浏览器，可以采用下面的写法。

    a {
      color: #7F583F;
      color: var(--primary);
    }
//可以使用@support命令进行检测
    @supports ( (--a: 0)) {
      /* supported */
    }

    @supports ( not (--a: 0)) {
      /* not supported */
    }

 

参考：http://www.ruanyifeng.com/blog/2017/05/css-variables.html

 

posted @ 2019-06-06 14:00  拈花醉  阅读(462)  评论(0)    收藏  举报