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

约定不等于承诺〃 2022-01-20 04:57 197阅读 0赞

## 一、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;
    }
    复制代码

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

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

##### 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动画曲线][cubic-bezier]

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

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