Less 避免编译

Less 避免编译

在 Less 编写过程中，有时候我们需要通过计算来得到某些值。比如高、宽等。

对于单位相同情况，可以直接计算。如：

// less
width: (100px - 10);

// css
width: 90px;

经过 less 编译，可以得到正确的值。

 

对于单位不相同的情况，可以采用 calc 。

// less
width: calc(100% - 10px);
height: calc(100vh - 20px);

// css
width: calc(90%);
height: calc(80vh);

可以发现，经过 less 编译后只是简单的进行值的计算，并保留了前者的单位，这明显是不正确的。当采用 calc 语法时，我们应该避免 less 的编译，保留原来格式，让浏览器进行计算。

 

官方提供了一个方法：将属性当字符串用引号括起来，并在前面加上波浪符 ~。如：

// less
width: ~'calc(100% - 10px)';
height: ~'calc(100vh - 20px)';

// css
width: calc(100% - 10px);
height: calc(100vh - 20px);

上面代码中，width 和 height 并没有被 less 编译，而是保持原来格式。

 

 

--- CEZLZ ---