阅读 525

CSS中的函数和变量

css.png

Modify By JasonSubmara

CSS函数

与Javascript一样,CSS中也有一些计算函数,仅对与一些常用的和个人了解的做一次分享。

CSS函数较多,从常用性和实际出发,按运用比重顺序排序

Color 颜色相关

rgb()、rgba()

这两个函数一定是不会陌生的,对于颜色属性值通过红绿蓝三原色来进行调整。

区别在于 rgba() 中 a 表示透明度,取值0-1之间。相对来说最为常用

image.png

除此之外,类似的CSS颜色函数还有:

hsl()、hsla()

使用色相、饱和度、亮度、(透明度)来定义颜色

hwb()

使用色相、以及黑白混合度(white\black)如上方右图所示。

相对的,可能对于美术或设计师更能理解以色相为主的颜色选取方式,其实对于代码来说,我们使用rgb()和rgba()即可,兼容性也是良好的。

color-mod()

CSS Color Module Level 4 中提出一个新的CSS

其是基于一个颜色值,在不同的条件下调整参数得到的新颜色,未作深入了解。可以通过colorme.io/这个网站来看下具体颜色值是如何变化的,同时大漠老师的博客中也有相关的文档解释,可以参考下。

使用color-mod()函数修改颜色

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() 线性渐变

image.png代码实现如下:

image.png

radial-gradient() 径向渐变

image.png 代码实现如下:

image.png

conic-gradient() 角向渐变

image.png 代码实现如下:

image.png

element() 将网站中的某部分当作图片渲染

CSS Color Module Level 4 中提出一个新的CSS,由于只能在Firefox 浏览器内产生效果,可以参考大漠老师的另一篇文章,里面有更为详细的介绍

CSS element()函数

Math 计算相关

image.png

相对来说,计算相关的函数其实兼容性一般,对于个人项目或移动端项目可以做尝试

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() 属性函数

image.png

image.png

仅从官方的例子中只能看到些基础的应用,且容易理解,而张鑫旭老师博客中指出:

传统的attr()语法只能让HTML属性作为字符串使用,且只能使用在伪元素中

全新的attr()语法那可就完全不得了了,可以让HTML属性值转换成任意的CSS数据类型。

个人尝试代码直接报错了~😅,

还是建议想要了解的查看下原文章:

www.zhangxinxu.com/wordpress/2…

CSS 变量

**var()函数可以代替元素中任何属性中的值的任何部分。var()**函数不能作为属性名、选择器或者其他除了属性值之外的值。

image.png

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上,可以进行一下参考~

参考链接

文章分类
前端
文章标签