学习 css变量 和 常用方式

861 阅读2分钟

css变量

使用CSS自定义属性(变量)

  1. 由作者自己定义的css属性,(比如: --main-color: black;)。
  2. 可以在整个文档中重复使用。
  3. css变量遵循级联,会从父级继承它们的值。
  4. var() 函数来获取值(比如: color: var(--main-color);
  5. 可以降低维护成本,增加页面高性能,减少代码体积。

变量声明和获

变量的声明语法是:--*,变量使用语法是:var(--*)* 代表变量名称。

:root{
  --main-color: #4d4e53;
}

:root 伪类在文档根节点设置属性,相当于全局添加了这个变量。

body {
  background-color: var(--main-color);
}

通过var()获取值,给属性设置样式。

注意

  1. 自定义变量名中不能包含 $,[ ,^,(,% 等字符。但是可以是包含中文等文字格式。
  body {
    --深蓝: #369;
    background-color: var(--深蓝);
  }
  1. 自定义变量只能在声明块{}里面,否则无效。
  2. 变量名大小写敏感,--h--H 是两个不同变量。
  3. 当存在多个同样名称的变量时候,变量的覆盖规则由CSS选择器的权重决定的。CSS 变量并不支持 !important 声明。
  4. var()语法为:var( <自定义属性名> [, <默认值> ]? ),当使用时变量无效,会直接获得默认值。默认值可以设置多个,都以前一个是否有效为准。
.a {
  color: var(--my-var, red); 
}
.b {
  color: var(--my-var, var(--my-color), red); 
}
  1. CSS变量的空格尾随特性。
body {
  --size: 20;   
  font-size: var(--size)px;
}

这样是无效的,因为取值后默认在后面添加了个空格。相当于font-size: 20 px;

  1. 变量间可以相互传递
body {
  --columns: 4;
  --margins: calc(24px / var(--columns));
}

常用方式

响应式布局使用

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style type="text/css">
      :root {
        --connt: 2;
        --background: #009688;
        --margins: 30px;
        --height: 150px;
      }

      body {
        --深蓝: #369;
        background-color: var(--深蓝);
        width: 100%;
      }

      .cell {
        width: calc(((100% - (var(--margins) * 4)) / var(--connt)));
        margin: var(--margins);
        background-color: #f0f3f9;
        float: left;
      }
      .cell-header {
        background: var(--background);
      }
      .cell-title {
        color: var(--color,#fff);
      }
      .cell-content {
        height: var(--height);
      }

      @media screen and (max-width: 600px) {
        :root {
          --connt: 1;
          --background: #9C27B0;
          --height:300px;
          --color:#000000;
        }
      }
    </style>
  </head>
  <body>
    <div class="cell">
      <header class="cell-header">
        <div class="cell-title">标题</div>
      </header>
      <main class="cell-content">会看到布局发生了变化</main>
    </div>
    <div class="cell">
      <header class="cell-header">
        <div class="cell-title">标题</div>
      </header>
      <main class="cell-content">会看到布局发生了变化</main>
    </div>
    <script type="text/javascript"></script>
  </body>
</html>

利用这个特点,可以在响应式布局的media命令里面声明变量,使得不同的屏幕宽度有不同的变量值。 1.gif

JavaScript 操作 CSS 变量

  1. 检查浏览器是否支持CSS 变量。
  const isSupported = window.CSS && window.CSS.supports &&  window.CSS.supports('--a', 0);
  1. JavaScript 操作 CSS 变量。
  // 查看所有设置的属性 包括css变量
  document.styleSheets
  
  // 注意不能直接使用getPropertyValue()获取 css设置好的 css变量, 只有设置了变量才能获取对应变量的值。
  // 设置值 变量值
  document.body.style.setProperty('--connt', '1');
  // 获取变量值
  document.body.style.getPropertyValue('--connt')
  // 获取变量值
  document.body.style.removeProperty('--connt')
<script type="text/javascript">
  var cssBol = true;
  function onCSS(){
    if(cssBol){
      document.body.style.setProperty('--connt', '1');
      document.body.style.setProperty('--background', '#9C27B0');
      document.body.style.setProperty('--height', '200px');
      cssBol = false;
    }else{
      document.body.style.setProperty('--connt', '2');
      document.body.style.setProperty('--background', '#009688');
      document.body.style.setProperty('--height', '150px');
      cssBol = true;
    }
  }      
</script>

1.gif

推举文章

巧借CSS var变量实现任意的CSS自定义语法
小tips: 如何借助content属性显示CSS var变量值