Calc的问题较少

时间:2019-05-17 03:33:21

标签: css css3 less css-calc

我尝试定义一个变量以获取动态高度并对其进行一些操作;但是代码无法编译。我该如何解决这个问题?谢谢。

"less": "3.9.0",

@block-height: calc(~"(100vh - 110px) / 3");
.block1{
  height: @block-height - 100
}
.block2{
  height: @block-height * 2
}

1 个答案:

答案 0 :(得分:1)

您可能需要将calc从变量移动到使用它的位置,并转义运算符。使用https://lesstester.com/进行快速测试,以下更少的源代码

@block-height: ~"(100vh - 110px) / 3"; 

.block1{ height: calc( @block-height ~"-" 100 ); } 
.block2{ height: calc( @block-height ~"*" 2); }

在解析时成为

.block1 {
    height: calc((100vh - 110px) / 3 - 100);
}
.block2 {
    height: calc((100vh - 110px) / 3 * 2);
}