CSS Functions && CSS Variables

CSS Variables

Syntax

{
--variable:#ffffff;
color: var(--variable);
}

CSS Functions

calc()

calc()用于对数值作计算，单位包括长宽（px、vw等）、频率（Hz等）、角度（deg、rad、turn等）、时间（s、ms）、小数和整数。

calc()要求+和-的左右有空格。

例如，width:calc(100% – 30px)定义了比父元素宽度小30px的宽度。

attr()

attr()用于取回被选择元素的属性，比如对一个<img>标签，可以用attr(src)获取图片地址。如果css选择器选择了多个元素，attr()在每个元素上可能有不同结果。

max()

取最大值。

min()

取最小值。

fit-content()

fit-content()接受一个参数，如果这个参数超过可设置的最大值，那么用最大值替代，如果小于最小值，则用最小值替代。原理其实是min(maximum size, max(minimum size, argument))。

env()

env()的作用类似于var()，但env()除了返回值，还会改变user agent-defined环境变量的值，MDN有如下例子：

body {
  padding:
    env(safe-area-inset-top, 20px)
    env(safe-area-inset-right, 20px)
    env(safe-area-inset-bottom, 20px)
    env(safe-area-inset-left, 20px);
}

第二个参数是可以省略的，这样不会更改user agent-defined环境变量的值。

user agent stylesheet即浏览器默认样式表，比如<h1></h1>会自带margin。有时这会给开发和适配带来不便，解决方案是使用reset.css。

counter()

MDN示例，看完应该明白了：

HTML

<ol>
  <li></li>
  <li></li>
  <li></li>
</ol>

CSS

ol {
  counter-reset: listCounter;/**重置计数器**/
}
li {
  counter-increment: listCounter;/**每多一个li元素listCounter+1**/
}
li::after {
  content: "[" counter(listCounter) "] == [" counter(listCounter, upper-roman) "]";/**通过counter获取listCounter的值**/
}

RESULT

linear-gradient()

线性渐变图像，支持设置颜色、角度、位置（百分比位置）,例如：

background: linear-gradient(0.5turn, #e66465 0%, #9198e5 100%);

repeat()、minmax()

和Grid配合使用，详情参考CSS Grid

rotate()、matrix()、scale()、translate()、skew()等

旋转、矩阵表达的线性变换、缩放、移动、扭曲，详情参考CSS transform

opacity()、blur()等

透明、模糊，详情参考CSS filter

一些实验特性

element()

比如background:element(#id)可以以#id选择的元素为背景，element()使元素作为图片使用。仅Firefox支持。