函数计算

# 函数计算

此文只记录了工作中常应用到的函数，并通过经验、搜索和实践进行扩展。

# 一、属性函数

# 1.1 基础知识

attr(val)用于返回节点属性，通常结合伪元素的content使用，兼容性好。

注意: attr() 理论上能用于所有的CSS属性但目前支持的仅有伪元素的 content 属性，其他的属性和高级特性目前是实验性的。
如果想完美使用attr()新语法，可以参考张鑫旭大佬的Polyfill吊炸天的CSS attr()新语法 (opens new window)

<h1 class="hello" data-name="玩转CSS的艺术之美"></h1>

h1 {
    &:empty::after {
        content: attr(data-name);
    }
}

1
2
3
4
5

::after通过attr()获取<h1 data-name>的属性值并赋值到content上，最终<h1>的innerText是玩转CSS的艺术之美。

# 1.2 实际应用

鉴于浏览器目前仅支持伪元素的局限性，实际应用我就从伪元素的应用出发，看看在此基础上加上attr()能不能碰撞出不一样的火花。毕竟伪元素虽然存在于页面，但不存在于DOM中，可是个好东西。

# 1.2.1 悬浮提示

/* 作者示例核心代码 */
&::after {
        position: absolute;
        left: 0;
        opacity: 0;
        content: attr(data-msg);
        transition: all 300ms;
}

&:hover::after {
   left: calc(100% + 20px);
   opacity: 1;
}

1
2
3
4
5
6
7
8
9
10
11
12
13

# 1.2.2 空数据情况的展示处理

实际应用中常常会出现暂无数据的展示处理，通常情况下都是通过判断用html处理，这里我们就可以通过CSS处理，更可以全局处理，一级棒！

<div class="list-wrap" data-msg="暂无数据">
  <div v-if="list && list.length">
    <!-- 数据展示 -->
  </div>
</div>

1
2
3
4
5

.list-wrap {

  &:empty::before,&:empty::after {
    position: absolute;
    width: 100%;
    padding: 16px;
  }

  &:empty::before {
    content: attr(data-msg);
    text-align: center;
    top: 48px;
    border-top: 2px dashed#ccc;
  }
  &:empty::after {
    content: '';
    top: 72px;
    border-bottom: 2px dashed#ccc;
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

效果如图所示：

其中:empty代表没有子元素的元素，子元素只可以是元素节点或文本（包括空格）。需要注意的是，伪元素不算内容。所以，通过伪元素来添加分割线，是不会影响空数据的判断。如果UI不嫌丑的话，就可以设成全局样式了。（或者，直接让UI丢张图片过来吧。）

# 二、数学函数

# 2.1 基础知识

calc(exp)用于动态计算单位，数值、长度、角度、时间和百分比都能作为参数。
max(...val)用于返回最大值，min(...val)用于返回最小值。
clamp(min, val, max)用于返回区间范围值。val在min~max间则返回val，val小于min则返回min，val大于max则返回max。

注意：每个运算符号必须使用空格间隔起来，否则不生效。

# 2.2 实际应用

# 2.2.1 兼容路由跳转时的左右滚动

在SPA中，在有滚动条和无滚动条页面进行切换的时候，会出现抖动。

.elem {
    padding-right: calc(100vw - 100%);
}

1
2
3

100vw是视窗宽度，100%内容宽度，那么100vw - 100%就是滚动条宽度了，声明padding-right用于保留滚动条出现的位置，这样滚动条出不出现都不会让页面抖动了。

# 2.2.2 响应式开发

限制容器的宽度位于100px和300px之间。

.elem {
    width: clamp(100px, 25vw, 300px);
}

1
2
3

在桌面端浏览器1024像素，在移动端100%宽度。

/* 常规写法 */
#app {
    width: 1024px;
    max-width: 100%;
}

/* 利用min() 来限制最大值 */
#app {
    width: min(1024px, 100%);
}

1
2
3
4
5
6
7
8
9
10

# 三、图形函数

# 3.1 基础知识

clip-path用于创建一个只有节点的部分区域可显示的剪切区域。裁剪完成后，内部区域显示，外部区域隐藏。

# 3.2 使用

使用专门裁剪路径的网站https://bennettfeely.com/clippy/ ，就可以轻松裁剪各种形状的图形。

# 四、总结

总得来说，
能用伪元素实现的效果都可以优先伪元素，伪元素的内容可以通过属性函数去获取；
涉及到数值计算的,都可以优先考虑数学函数;
涉及容器大小分类展示的，clamp/max/min走起；
想给图片裁剪成各种形状装装逼的，利用网站一秒逼。

接下来，就是好好优化一下自己的代码，学以致用，举一反三。

FlexBox 弹性布局水平垂直居中

LinHuijuan's Blog

Choose mode