【项目实用】Css 变量及函数

一、css变量

我们为何要使用css变量，css变量好用在那里？下面介绍下css变量的各种优点。

如何定义一个css变量：

:root {
    --red: #f30a0a;
}
.box {
    color: var(--red);
}
复制代码

变量定义语法是：--*
变量使用语法是: var(--*)

css变量命名规则：

body {
    --深蓝: #369;
    background-color: var(--深蓝);
}
复制代码

变量命名不能包含 $,[,^,(,% 等字符 普通字符局限在只要是数字[0-9]／字母[a-zA-Z]／_／-这些组合。 还可以是中文，日文或者韩文； 变量名大小写敏感， --blue 和 --Blue 是两个不同变量。

变量值只能作用属性值，不能用作属性名，以下是变量的错误定义：

.foo {
    --side: margin-top;
    var(--side): 20px;
}
复制代码

变量值带有单位，不能写成字符串： 错误定义：

body {
    --size: 20;
    font-size: var(--size)px;
}
复制代码

正确定义：

body {
    --size: 20px;
    font-size: var(--size);
}
复制代码

或:

body {
    --size: 20;
    font-size: calc(var(--size) * 1px);
}
复制代码

css变量中 sass / less / css 表达的差异：

sass:  $black: #333;
less:  @black: #333;
css:   --black: #333;
复制代码

可以看出 css 变量为我们带来一些预处理器的便利，并且不需要额外的编译；

css变量适用场景：

1.html标签和css类名分别使用css变量：

:root {
    --red: #f30a0a;
    --blue: blue;
}
.box {
    color: var(--red);
}
复制代码

<div class="box">内容颜色为红色哦</div>
<svg>
    <rect x="20" y="20" rx="20" ry="20" width="250" height="100" fill="var(--blue)"/>
</svg>
复制代码

效果图：

2.css 变量适用 svg 图标变色

.warn {
    --icon-color: red;
}
.pass {
    --icon-color: green;
}
复制代码

<svg t="1558780629039" class="warn" viewBox="0 0 1024 1024" p-id="739" width="200" height="200" fill="var(--icon-color)"><path d="M512 32C246.912 32 32 246.912 32 512c0 265.088 214.912 480 480 480 265.088 0 480-214.912 480-480 0-265.088-214.912-480-480-480z m0 896C282.24 928 96 741.76 96 512S282.24 96 512 96s416 186.24 416 416-186.24 416-416 416z" p-id="740"></path><path d="M512 384a32 32 0 0 0-32 32v352a32 32 0 0 0 64 0V416a32 32 0 0 0-32-32z" p-id="741"></path><path d="M512 272m-48 0a48 48 0 1 0 96 0 48 48 0 1 0-96 0Z" p-id="742"></path></svg>
复制代码

或者我们同样也可以使用 css 变量关键字 currentColor 达到以上效果：

.warn {
  color: red;
}
.pass {
  color: green;
}
复制代码

<svg t="1558780629039" class="warn" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="739" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200" fill=currentColor><defs><style type="text/css"></style></defs><path d="M512 32C246.912 32 32 246.912 32 512c0 265.088 214.912 480 480 480 265.088 0 480-214.912 480-480 0-265.088-214.912-480-480-480z m0 896C282.24 928 96 741.76 96 512S282.24 96 512 96s416 186.24 416 416-186.24 416-416 416z" p-id="740"></path><path d="M512 384a32 32 0 0 0-32 32v352a32 32 0 0 0 64 0V416a32 32 0 0 0-32-32z" p-id="741"></path><path d="M512 272m-48 0a48 48 0 1 0 96 0 48 48 0 1 0-96 0Z" p-id="742"></path></svg>
复制代码

3.css变量使用响应式布局（效果form：zhangxinxu)

.box {
    --columns: 4;
    --margins: calc(24px / var(--columns));
    --space: calc(4px * var(--columns));
    --fontSize: calc(20px - 4 / var(--columns));
}
.box {
    width: 50%;
    min-width: 320px;
    margin: auto;
    overflow: hidden;
}
.cell {
    width: calc((100% - var(--margins) * var(--columns) * 2) / var(--columns));
    margin: var(--margins);
    box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12);
    background-color: #f0f3f9;
    float: left;
}
.cell-header {
    background: currentColor;    
}
.cell-title {
    color: #fff;
    padding: var(--space);
    font-size: var(--fontSize);
}
.cell-content {
    height: 150px;
    padding: var(--space);
    font-size: var(--fontSize);
}
@media screen and (max-width: 1200px) {
    .box {
        --columns: 3;
    }
}
@media screen and (max-width: 900px) {
    .box {
        --columns: 2;
    }
}
@media screen and (max-width: 600px) {
    .box {
        --columns: 1;
    }
}
复制代码

<div class="box">
    <div class="cell" style="color: #F44336;">
        <header class="cell-header">
          <div class="cell-title">红色</div>
        </header>
        <main class="cell-content">改变浏览器的宽度</main>
      </div>
      <div class="cell" style="color: #E91E63;">
        <header class="cell-header">
          <div class="cell-title">粉色</div>
        </header>
        <main class="cell-content">会看到布局发生了变化</main>
      </div>
      <div class="cell" style="color: #9C27B0;">
        <header class="cell-header">
          <div class="cell-title">紫色</div>
        </header>
        <main class="cell-content">仅仅是通过CSS改变一个变量值实现</main>
      </div>
      <div class="cell" style="color: #00BCD4;">
        <header class="cell-header">
          <div class="cell-title">青色</div>
        </header>
        <main class="cell-content">这比传统的响应式处理要更省代码更好维护</main>
      </div>
      <div class="cell" style="color: #009688;">
        <header class="cell-header">
          <div class="cell-title">茶色</div>
        </header>
        <main class="cell-content">本例子主要为了演示响应式与变化效果</main>
      </div>
      <div class="cell" style="color: #4CAF50;">
        <header class="cell-header">
          <div class="cell-title">绿色</div>
        </header>
        <main class="cell-content">所以，至于布局变化细节是否合理就不用在意了。</main>
    </div>
</div>
复制代码

4.js 操作 css 变量

:root {
    --red: red;
    --blue: blue;
}
.box {
    width: 100px;
    height: 100px;
    background: var(--blue);
}
复制代码

<div class="box"></div>
复制代码

var box = document.querySelector('div');
box.style.setProperty('--blue','var(--red)');
复制代码

4.css 变量兼容性

二、css 函数

css 函数可以轻松让我们做到不需要任何 js 计算来实现的逻辑计算和效果哦！下面让我们看看有哪些 css 函数可以帮助到我们的吧！

一般带 () 的都是函数表达，那这样看来，我们 css 函数可真的不少啊：

下面介绍几个常用的 css 函数吧～

css函数：

一、属性函数: attr()

.pic {
    width: 150px;
    height: 200px;
    position: relative;
    display: block;
}
.pic img {
    height: 100%;
    display: block;
}
.pic:hover::before {
    position: absolute;
    content: attr(data-description);
    width: 100%;
    height: 100%;
    text-align: center;
    color: #FFF;
    background: rgba(0,0,0,.7);
}
复制代码

<a class="pic" href="#" data-description="我想混吃等死">
    <img src="https://bookcover.yuewen.com/qdbimg/349573/1014983106/180"/>
</a>
复制代码

或者一些图标上 tips 提示

使用 attr()
优点：节省标签，将可修改的内容暴露在html标签上。
缺点： content的内容无法被选择也无法搜索到，不适合放关键文字。

html标签上的data-name可以用attr()去获取，那它的width怎么获取并使用呢？

一、属性函数: attr() 结合 css 变量的使用

如下图实现进度条的效果：

.line {
    background: #3e58d7;
    width: 80%;
    height: 10px;
    margin: 100px auto;
    position: relative;
}
.line::before {
    position: absolute;
    content: '';
    left: 0;
    width: var(--percent);
    height: 10px;
    background: #ff002d;
    max-width: 100%;
    min-width: 0%;
}
.line::after {
    position: absolute;
    content: '';
    width: 2px;
    height: 10px;
    background: white;
    left: calc(var(--percent) - 1px);
}
复制代码

<div class="line" style="--percent:14%;">
复制代码

attr()的兼容性也非常的好，IE8+都是可以完美支持这个属性的，所以大家可以放心大胆的使用哟！

二、计算函数: counter()

css 的计数器大家一定不会很陌生吧，我们常用来给列表编号，方便又好用！

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>CSS counter()函数详解-CSS教程</title>
<meta name="author" content="Joy Du(飘零雾雨), dooyoe@gmail.com, www.doyoe.com" />
<style>
ol{margin:0;padding:0;list-style:none;counter-reset:item;}
li{padding-left:2em;}
li:before{counter-increment:item;content:counter(item)".";color:#f00;}
</style>
</head>
<body>
<ol class="test">
    <li>Node
        <ol>
            <li>Node
                <ol>
                    <li>Node</li>
                    <li>Node</li>
                </ol>
            </li>
                <li>Node</li>
        </ol>
    </li>
    <li>Node</li>
    <li>Node</li>
</ol>
</body>
</html>
复制代码

除了给列表编号，counter()还可以帮我们算数！ 例如，我们可以结合input的checked属性来做到js的计算效果:

.box {
    counter-reset: characters;
}
input:checked {
    counter-increment: characters
}
.total {
    position: relative;
    padding-right: 10px;
}
.total:after {
    position: absolute;
    content: counter(characters);
}
复制代码

<div class="box">
    <p>选择你想要吃的水果</p>
    <input type="checkbox" value="苹果"/>苹果
    <input type="checkbox" value="橘子"/>橘子
    <input type="checkbox" value="柠檬"/>柠檬
    <p>你一共选择了<span class="total"></span>种水果</p>
</div>
复制代码

三、计算函数: calc()

.box {
    width: calc(100% - 20px);
}
复制代码

计算函数: calc() 实例：

假如我们有一个logo，作为背景图原本是放在页面的左上方的，突然需求变了，需要将此logo放在页面的右下方，那我们用calc()使用再好不过了，因为calc()还可以帮我们计算出想要的间距，如： form：

body {
    background: white url(https://qidian.gtimg.com/qdm/img/logo-qdm.02fc8.svg) 25px 25px no-repeat;
}
复制代码

body {
    background: white url(https://qidian.gtimg.com/qdm/img/logo-qdm.02fc8.svg) calc(100% - 25px) calc(100% - 25px) no-repeat;
}
复制代码

我们的计算函数calc()同样可以用在布局上哦：

好用的calc()兼容性也是超级棒的：

四、滤镜函数: filter()

滤镜函数完全就是 css 版的 ps 哇！

img {
    -webkit-filter: blur(5px); /* Chrome, Safari, Opera */
    filter: blur(5px);
}
复制代码

<img src="pineapple.jpg" alt="Pineapple" width="300" height="300">
复制代码

五、动画函数: cubic-bezier()

动画曲线由4个点组成，p0和p1的坐标固定为：(0，0) 和 (1,1)。p2和p3两个点任意拖动就可以组成我们的动画曲线了。

css 为我们调好了几个动画曲线参数，我们可以直接使用，如linear ease ease-in ease-in-out

点击在线生成 cubic-bezier动画曲线

上面这个网站大家可以自行生成想要的动画曲线路径哦～ 其实animate.css 也帮我们设置好了很多曲线变量，大家也可以直接使用的。

我们可以查看它的源码，都是官方调试好的贝塞尔曲线运动路径

以上就是一些日常的 css 变量和 css 函数 tips 了，大家有get到知识嘛～麻烦给我一个小心心哦❤️～