在less中使用calc()

Posted on In

calc()在css中可以很方便的使用，但是在使用less时calc()内的东西会被编译器当作算式进行计算，例如

1
height:calc( 100% - 20px );

会被编译成 

1
height:calc ( 80% );

此时，需要用到less的e()字符串函数来让其以css方式解析 > ### e > > CSS escaping, replaced with ~"value" syntax. > > It expects string as a parameter and return its content as is, but without quotes. It can be used to output CSS value which is either not valid CSS syntax, or uses proprietary syntax which Less doesn't recognize. > > Parameters: string - a string to escape. > > Returns: string - the escaped string, without quotes. > > Example: > 
filter: e("ms:alwaysHasItsOwnSyntax.For.Stuff()");
Output: 
filter: ms:alwaysHasItsOwnSyntax.For.Stuff();

Note: The function accepts also ~"" escaped values and numbers as parameters. Anything else returns an error.

因此，需要这样写 

1
height: calc( e("100% - 20px") );

或 

1
height: calc(~"100% - 20px");

这时就能满足需求，编译成css后会保持 

1
height: calc( 100% - 20px );

的样子。