CSS/CSS3 变量var()使用以及 calc()函数计算的使用

最新推荐文章于 2025-03-25 21:31:59 发布

Skime Ma

最新推荐文章于 2025-03-25 21:31:59 发布

阅读量1.1w

点赞数 5

分类专栏： CSS3 文章标签： css html css3

本文链接：https://blog.csdn.net/weixin_44622984/article/details/109513492

版权

CSS3 专栏收录该内容

8 篇文章

订阅专栏

在这里记录一下开发过程中突然喜欢上的CSS/CSS3 var()变量以及calc()函数 , 让在不使用sass以及less的情况下也能进行一个比较高效的样式设置

var()变量

var变量的定义语法 : - -变量名 两个短横线加上变量名
var变量的使用 : var(- -变量名)
我们可以在body中或者任何一个我们想要使用的变量语法的层级中定义var()变量并进行使用

例如在body中定义:

body{
	--fontSize: 18px;
	--color: #000000;
}

在某标签中使用:

div-name{
	font-size : var(--fontSize);
	color: var(--color);
}

这样可以直接设置此div块的样式,用起来非常的舒服,维护修改起来也特别方便!

calc()函数

在目前高兼容要求下 calc() 函数计算越来越重要,将calc()函数计算和var()变量结合使用更是相当的舒服

例如:

body{
    --width : 200px;
    --height : 200px;
    --color : red;
    --fontSize : 18px;
    --bgColor : #3c3c3c;
}
body{
    display: flex;
    justify-content: space-around
}
div{
    width: var(--width);
    height: var(--height);
    line-height: var(--height);
    background-color: var(--bgColor);
    text-align: center;

}
.div-1{
    color: var(--color);
    font-size: var(--fontSize);
}
.div-2{
    color: yellow;
    font-size: calc(var(--fontSize) + 4px);
}
.div-3{
    color: green;
    font-size: calc(var(--fontSize) + 8px);
}

<body>
    <div class="div-1">div-1</div>
    <div class="div-2">div-2</div>
    <div class="div-3">div-3</div>
</body>

最终呈现的效果
在这里插入图片描述

注:calc()函数计算使用的时候有几个地方需要注意:
运算符前后都需要保留一个空格
任何长度值都可以使用calc()函数进行计算；
calc()函数支持 “+”, “-”, “*”, “/” 运算；
calc()函数使用标准的数学运算优先级规则；

完美的通过var变量统一设置了宽高等属性,并且通过var变量和calc函数计算的结合设置了字体大小的增减,同理可以使用这种方法对margin,padding,width等等属性进行设置,使用起来不要太爽!

并且目前兼容性来说基本主流浏览器都兼容了,很是不错,参考以下
在这里插入图片描述

CSS/CSS3 变量var()使用 以及 calc()函数计算的使用

var()变量

calc()函数

CSS/CSS3 变量var()使用以及 calc()函数计算的使用