胖蔡说技术
随便扯扯

前端使用var()实现样式的自定义配置

var()函数可以实现将我们定义的CSS变量传递给属性,且var()函数有且今年用于属性值的设置。var()函数通常是配合css变量一起来使用,且不需要关心浏览器类型,现在的主流浏览器均支持var()函数。那么,我们来看下var()函数的格式:

var( <custom-property-name> , <declaration-value>? )  
css函数
  • <custom-property-name>:自定义变量名,一般是以两个破折号开始的,如:
:root {
     --main-color:#fafafa;
}

html,body {
    background-color:var(--main-color);
}
  • <declaration-value>:声明值(后备值),回退值被用来在自定义属性值无效的情况下保证函数有值。使用上述的示例:
html,body {
    background-color:var(--main-color,#acacac);
}

CSS 变量

在使用var()之前,我们需要先了解下CSS中的变量类型,一个各种变量类型的区别。CSS变量主要有两种:一种是全局变量,一种是局部变量。顾名思义,这两种变量的主要区别在于作用区间。

  • 全局变量

全局变量可以在任何位置访问,可以通过:root选择器声明,匹配文档的根元素。其声明格式如下:

:root {
    --main-color:#f2f2f2;
    --default-font-size:14px;
}
html,body {
    margin:0;
    font-size:var(--default-font-size);
}
  • 局部变量

局部变量可以在选择器中声明,并在选择器内使用,并可以随时修改,也可以配合media媒体查询进行修改。

.inner {
    font-size:var(--big-size,--default-font-size); // 默认使用 --big-size,这里--big-size还未设置,使用 --default-font-size
    --big-size:22px;
}

@media screen and (max-width: 950px) {
  .inner{
    --bing-size: 16px;
  }
}

使用

使用就比较简单了,通过上述的示例,我们也可以发现了使用方式了,在css属性值中通过var包裹变量即可,也可以作为变量值表达式的一部分。

:root {
   --max-width:1200px;
}

body > main {
    max-width:var(--max-width);
    border-radius:calc( var(--max-width) / 1000 );
}

合理使用CSS变量var()函数可以帮助我们进行网站的主题配置也可以配合media查询进行多尺寸、多设配类型兼容。

赞(0) 打赏
转载请附上原文出处链接:胖蔡叨叨叨 » 前端使用var()实现样式的自定义配置
分享到: 更多 (0)

请小编喝杯咖啡~

支付宝扫一扫打赏

微信扫一扫打赏