CSS中的函数和变量
CSS函数
与Javascript一样，CSS中也有一些计算函数，仅对与一些常用的和个人了解的做一次分享。
CSS函数较多，从常用性和实际出发，按运用比重顺序排序
Color 颜色相关
rgb()、rgba()
这两个函数一定是不会陌生的，对于颜色属性值通过红绿蓝三原色来进行调整。
区别在于 rgba() 中 a 表示透明度，取值0-1之间。相对来说最为常用
除此之外，类似的 CSS颜色函数 还有：
hsl()、hsla()
使用色相、饱和度、亮度、(透明度)来定义颜色
hwb()
使用色相、以及黑白混合度（white\black）如上方右图所示。
相对的，可能对于美术或设计师更能理解以色相为主的颜色选取方式，其实对于代码来说，我们使用rgb()和rgba()即可，兼容性也是良好的。
color-mod()
CSS Color Module Level 4 中提出一个新的CSS
其是基于一个颜色值，在不同的条件下调整参数得到的新颜色，未作深入了解。可以通过 colorme.io/ 这个网站来看下具体颜色值是如何变化的，同时大漠老师的博客中也有相关的文档解释，可以参考下。
Transform 变换相关
对于不同内核浏览器，可能需要加入私有前缀来进行对应的兼容性处理，而3d边换，IE毒瘤则是一定不支持的
translate 位置变换：translate()、translateX()、translateY()、translate3d()
rotate 旋转变换：rotate()、rotate3d()、rotateX()、rotateY()、rotateZ()
skew 倾斜变换：skew()、skewX()、skewY()
scale 缩放变换：scale()、scale3d()、scaleX()、scaleY()、scaleZ()
Background 背景相关
linear-gradient() 线性渐变
代码实现如下：
radial-gradient() 径向渐变
代码实现如下：
conic-gradient() 角向渐变
代码实现如下：
element() 将网站中的某部分当作图片渲染
CSS Color Module Level 4 中提出一个新的CSS，由于只能在Firefox 浏览器内产生效果，可以参考大漠老师的另一篇文章，里面有更为详细的介绍
Math 计算相关
相对来说，计算相关的函数其实兼容性一般，对于个人项目或移动端项目可以做尝试
min() 取最小值
对于dialog这一类元素，其长度应当适应于不同分辨率下，以往可能需要使用 vw / % 等来渲染，但是会有一个问题，那就是在不同分辨率下可能 60vw / 60% 下，dialog的宽度在1920分辨率下看着还算正常，但是在1366等比较小的分辨率下会出现宽度不足以容纳内部元素，或者做适配时不太优雅展示的时候，可以考虑结合这一类计算函数来进行。
.dialog { width: min(700px,80vw) /* 解析为宽度取 700px 和 80vw 中较小的那一个数值 */ } 复制代码
max() 取最大值
同min() 取值逻辑
clamp() 取值范围
clamp(MIN, VAL, MAX) = max(MIN, min(VAL, MAX))
其中MIN表示最小值，VAL表示首选值，MAX表示最大值。意思是，如果VAL在MIN和MAX范围之间，则使用VAL作为函数返回值；如果VAL大于MAX，则使用MAX作为返回值；如果VAL小于MIN，则使用MIN作为返回值。
.dialog { width: clamp(240px, 50vw, 600px) /* 解析为当 50vw > 600px 时，.dialog width值等于600px */ /* 当 240px <= 50vw <= 600px 时，.dialog width值等于50vw */ /* 进一步缩小，当 50vw < 240px时，.dialog width值等于 240px */ } 复制代码
相关例子效果展示可以参考张鑫旭老师博客中的在线代码，地址如下:
www.zhangxinxu.com/study/20200…
calc() 动态计算
calc() 应该是最为常见的css计算函数了，可结合 四则运算来取部分的宽高等，可用于圣杯布局中主体内容的宽高计算等需要动态计算的地方
Attr() 属性函数
仅从官方的例子中只能看到些基础的应用，且容易理解，而张鑫旭老师博客中指出：
传统的attr()语法只能让HTML属性作为字符串使用，且只能使用在伪元素中
全新的attr()语法那可就完全不得了了，可以让HTML属性值转换成任意的CSS数据类型。
个人尝试代码直接报错了~ ，
还是建议想要了解的查看下原文章：
www.zhangxinxu.com/wordpress/2…
CSS 变量
**
var()
函数可以代替元素中任何属性中的值的任何部分。
var()
**函数不能作为属性名、选择器或者其他除了属性值之外的值。
CSS 变量声明
--*
用来声明变量，使用
var(--*)
来使用变量
- CSS变量声明只可用于属性值，不可用以属性名
- CSS变量不支持多个同时声明
- CSS变量使用的合法性
- CSS变量与属性单位结合需要使用 * 乘法
-
CSS变量的声明时可相互调用声明的变量
:root { --main-bg-color: pink; --ml: 20px; --mlv: 20; --primary-size: 20px; --base-font-size: var(--primary-size); /* 变量声明时的调用 / } body { background-color: var(--main-bg-color); / 表现结果为：背景色为粉红 / } .ml20 { margin-left: var(--ml); margin-left: calc(var(--mlv) * 1px); / 表现结果都是左间距20px,此处的变量运用需区别带单位和不带单位的使用差异 */ }
CSS 变量作用域
:root { --color: purple; } div { --color: green; } #alert { --color: red; } * { color: var(--color); } <p>我的紫色继承于根元素</p> <div>我的绿色来自直接设置</div> <div id='alert'> ID选择器权重更高，因此阿拉是红色！ <p>我也是红色，占了继承的光</p> </div> 复制代码
上述代码中，显示出了CSS变量也是具有作用域的
: root 取全局作用域，div 取所有的div元素，#alert 取所有id为alert的元素使用，按照css解析顺序，上面案例代码的元素颜色即和文字表述一致
JS读取CSS变量
var cssVarColor = getComputedStyle(box).getPropertyValue('--color'); // 输出cssVarColor // 输出变量值是：#cd0000 console.log(cssVarColor); 复制代码
CSS 变量在日渐完善，浏览器对于其支持性也在慢慢变多，而区别于Sass/Less 等预处理器来说，原生变量不需要去进行编译等操作，但是相对的，CSS变量的语法还有待提高和优化，不过我们可以提前做尝试和运用~
内容些许浅显，仅是个人对于部分CSS相关的知识的归纳总结，不当之处，感谢指正！
如需要更多更详细的解读，可通过参考链接阅读相关文章做近一步了解~
文中 部分案例代码 在我个人的Github上，可以进行一下参考~
参考链接
- css函数竟然有86个！！！css函数大全
- css hwb() Function
- 了解CSS min()/max()/clamp()数学函数
- 使用color-mod()函数修改颜色
- Polyfill吊炸天的CSS attr()新语法
- CSS 变量教程
作者：JasonSubMara
链接： https:// juejin.cn/post/69089620 52727898125
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。