因为专注,所以专业
2005 - 2020

CSS变量(自定义属性)实践指南

时间:2020-02-06 03:36:38    作者:八叔模板堂

什么是CSS变量?

let number1 = 2;
let number2 = 3;
let total = number1 + number2;
console.log(total); // 5
number1 = 4;               
total = number1 + number2;
console.log(total); // 7

使用CSS变量有什么好处?

CSS变量和预处理器中的变量有什么不同?

CSS变量:语法

--my-cool-background: #73a4f4;
var(--my-cool-background);
:root {
    --my-cool-background: #73a4f4;
}
 
/* CSS文件的其他部分 */
#foo {
    background-color: var(--my-cool-background);
}
p {
    color: var(--my-cool-background);
}
--top-color: orange;
--bottom-color: yellow;
--my-gradient: linear-gradient(var(--top-color), var(--bottom-color));
var(--main-color, #333);

CSS变量是区分大小写的

CSS变量受级联关系影响

:root {
    --main-color: blue;
}
:root {
    --main-color: blue;
}
.alert {
    --main-color: red;
}
p {
    color: var(--main-color);
}
<--! HTML -->
<html>
  <head>
    <!-- head code here -->
  </head>
 
  <body>
    <div>
      <p>blue 的段落</p>
      <div class="alert">
        <p>red 的段落</p>
      </div>
    </div>
  </body>
</html>

如何在SVG中使用CSS变量

/* inline SVG symbol for the icon */
<svg>
  <symbol id="close-icon" viewbox="0 0 200 200">
    <circle cx="96" cy="96" r="88" fill="none" stroke="var(--icon-color)" stroke-width="15" />
    <text x="100" y="160" fill="var(--icon-color)" text-anchor="middle" style="font-size:250px;">x</text>
  </symbol>
</svg>
 
/* first instance of the icon */
<svg>
  <use xlink:href="#close-icon" />
</svg>
:root {
    --icon-color: black;
}
<!-- html -->
<div >
    <svg>
        <use xlink:href="#close-icon" />
    </svg>
</div>
/* css */
.success {
    --icon-color: green;
}

如何在@keyframes中使用CSS变量

.bubble {
  --direction-y: 30px;
  --transparency: 0;
  animation: bubbling 3s forwards infinite;
}
 
@keyframes bubbling {
  0% {
    transform: translatey(var(--direction-y));
    opacity: var(--transparency);
  }
  40% {
    opacity: calc(var(--transparency) + 0.2);
  }
  70% {
    opacity: calc(var(--transparency) + 0.1);
  }
  100% {
    opacity: var(--transparency);
  }
}

如何通过JavaScript操作CSS变量

.sidebar {
    --left-pos: 100px;
}
// 缓存你即将操纵的元素
const sidebarElement = document.querySelector('.sidebar');
 
// 缓存sidebarElement的样式于cssStyles中
const cssStyles = getComputedStyle(sidebarElement);
 
// 获取 --left-pos CSS变量的值
const cssVal = String(cssStyles.getPropertyValue('--left-pos')).trim();
 
// 将CSS 变量的值打印到控制台: 100px
console.log(cssVal);
sidebarElement.style.setProperty('--left-pos', '200px');

CSS变量的浏览器支持

section {
    color: gray;
}
 
@supports(--css: variables) {
    section {
        --my-color: blue;
        color: var(--my-color, 'blue');
    }
}
赞(0
免费拨打  111-1111-1111
免费拨打  111-1111-1111免费拨打 111-1111-1111
微信二维码
手机二维码
返回顶部
返回顶部返回顶部