Question

我有一个非常简单的html文件，其中我使用较少的预处理css。对于这个测试，我使用了独立的html文件和最新的firefox浏览器。

HTML文件如下：

<head>
    <link rel="stylesheet/less" type="text/css" href="category.less" />
    <script src="http://cdnjs.cloudflare.com/ajax/libs/less.js/1.7.0/less.min.js"></script>
</head>

<body>
    <div class="text">Hello there!!</div>
</body>

我的 category.less 文件如下：

.setColor(){
  @colorx:"yellow";
}
.text{
    .setColor();
    color: @colorx;
    font-size:20px;
}

我在this example from less documentation的基础上开发了这个例子。

我的问题是当我运行文件时，颜色 css属性根本没有应用。

在Firebug中，它看起来像这样：

.text {
    font-size: 20px;
}

但是，当我通过在线较少的预处理器解析相同的 less 代码时，我确实获得了所需的输出。我尝试过this compiler，this compiler和this compiler。

值得注意的是this compiler给出了与我的代码相同的输出（没有颜色属性）。

Answer 1

我认为您看到的输出差异是由于这些编译器使用了不同版本的LESS规范。 ~~以前的版本~~当前版本的LESS（感谢@ seven-phases-max）允许在mixins中创建的变量在整个文档中使用（＆＃39;全局范围＆＃39;）。

您已在mixin中创建了@colorx变量。要使用版本1.4.x在编译器中使用代码，您需要在mixin外部设置@colorx变量，因此它具有全局范围，或者使用mixin将颜色应用于.text

以下是demonstrating variable scope LESS in a compiler (currently) running an older compiler的示例所以我想你有几个选择。

选项一，继续使用旧编译器并将mixin更改为：

.setColor(){
    @colorx:"yellow";
    color: @colorx;
}

.text {
    .steColor();
    font-size:20px;
}

或者，将所有颜色放在一起，并在较小文件的正文中声明@colorx:"yellow";变量。

或者最后，正如@ seven-phases-max指出的那样，您的代码可以在当前版本的编译器中运行，因此您可以切换到更新的编译器并按原样使用您的代码。 / p>

较少在编译的客户端上工作

1 个答案: