本篇主要介绍 calc 函数，CSS函数之一，可以在CSS中执行计算操作。

使用 calc() 函数计算 div 元素的宽度，实现 div 距离左右边界各50px:

1
2
3
4
5
6
7
8
9
#div1 {
    position: absolute;
    left: 50px;
    width: calc(100% - 100px);
    border: 1px solid black;
    background-color: yellow;
    padding: 5px;
    text-align: center;
}

定义与用法

calc() 函数用于动态计算长度值，CSS3支持。

  • 需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)；
  • 任何长度值都可以使用calc()函数进行计算；
  • calc()函数支持 “+”, “-“, “*”, “/“ 运算；
  • calc()函数使用标准的数学运算优先级规则；

在LESS中

在LESS中 calc(100% - 40px) 等带单位混合运算会被LESS解析忽略单位，全部按照百分比计算，此例中的计算被LESS编译成 calc(60%)。

解决方案：
结合LESS使用特点，将计算放到LESS中解决。如上例 calc(100% - 40px)在LESS中可写为 calc(~"100% - 40px") 

1
2
3
4
5
@height: 40px;
@borderHeight: 1px;
@marginHeight: 10px;
margin-bottom: calc(~"@{height}" );
margin-bottom: calc(~"@{height} + @{borderHeight} * 3 + @{marginHeight} * 2" );

在Stylus中

在Stylus中 calc 也可以使用，在使用变量时，需要用 %s 替代，然后在行尾 % 之后赋值

1
2
3
headHeight=50px  /* stylus语法中定义一个变量 */
footerHeight = 50px
height 'calc(100%  - %s - %s)' % (headHeight footerHeight)