Less里css表达式的写法示例介绍

在项目的开发过程中，我们采用了grunt-contrib-less来处理LESS样式表。我遇到了一段特定的LESS代码，涉及到固定定位元素在IE6下的兼容性问题。让我为你详细一下这段代码及其背后的故事。

我们有一个名为`.mapfix`的样式类，用于固定定位一个元素。这个元素位于页面的顶部10像素处，宽度为430像素，具有极高的z-index值（100），以确保它始终显示在其他元素之上。它的背景颜色被设置为白色。

这段代码中包含了针对IE6的特定hack。在早期的IE版本中，固定定位（fixed positioning）并不被支持，因此开发者使用了一些技巧来模拟这种行为。这里的技巧是使用绝对定位（absolute positioning）和表达式（expression）来动态调整元素的位置。

当执行LESS编译时，我们遇到了错误。经过调查，问题出在IE的CSS表达式上。为了解决这个问题，仕龙同学提供了一个巧妙的解决方案。

原来，我们需要对IE的CSS表达式进行微调。在`-top`属性的值前面添加一个波浪号（~），然后用双引号将其括起来。这样可以确保LESS编译器正确这个表达式。调整后的代码如下所示：

```less

-top: ~"expression(eval(document.documentElement.scrollTop+10));";

```

这一改动使得我们的LESS代码能够在编译时顺利通过，同时保留了针对IE6的固定定位兼容性的hack。这样，无论使用现代浏览器还是古老的IE6，我们的页面元素都能够以预期的方式呈现。

代码中提到的`cambrian.render('body')`可能是某个库或框架的特定方法调用，用于渲染或初始化页面的主体部分。由于上下文信息有限，我无法提供更多关于这部分的详细解释。