Question

我遇到了让LessCSS使用“＆amp;”处理具有一系列嵌套规则的文件的实际问题连接选择器。

例如，以下内容可以正常运行：

.grey-table {
    background: #EDEDED;
    tr {
        th {
            background: #DEDEDE;
        }
        td {
            color: #888;
        }
        &:nth-child(odd) {
            td {
                background-color: #F9FCFF;
            }
        }
        &:nth-child(even) {
            td {
                background-color: #EDF5FF;
            }
        }
        &:hover {
            td {
                background-color: #DFEAF9;
            }
        };
    }
}

但是，如果我将颜色更改为一个函数（任何类型 - 预定义或混合），我会收到错误

“第12行的语法错误 - 未定义”

 .grey-table {
    background: desaturate(#EDEDED, 100%);
    tr {
        th {
            background: desaturate(#DEDEDE, 100%);
        }
        td {
            color: desaturate(#888, 100%);
        }
        &:nth-child(odd) {
            td {
                background-color: desaturate(#F9FCFF, 100%); <------ Line 12
            }
        }
        &:nth-child(even) {
            td {
                background-color: desaturate(#EDF5FF, 100%);
            }
        }
        &:hover {
            td {
                background-color: desaturate(#DFEAF9, 100%);
            }
        };
    }
}

我找不到任何参考资料，但我确定我不能成为唯一的参考材料？

非常感谢。

Answer 1

我通常首先定义颜色，然后在函数中调用它们：

@mycolor: #F9FCFF;
desaturate(@mycolor, 100%);

很抱歉，您的代码在较少的页面上没有错误： http://less2css.org/

尝试粘贴它（没有你的＆lt; ---第12行），你会发现它有效。你可能正在使用一些与页面上较少的脚本交互的javastript。

修改最后还有一个分号，它打破了较少解析器的旧版本（＆lt; = 1.3.1）。如果我把它拿出来，它可以很好地解析各种版本...而且我无法重现你的错误。

Answer 2

我是个白痴，并没有注意到结肠后第12行的标签。

这就是造成错误的原因，但只有当css mixin / variable少时才会出现。向所有人道歉。

Answer 3

我同意Martin的说法，我无法使用上面的代码和http://less2css.org/的编译器重现您的错误。我可以在第12行重现语法错误消息的唯一方法是：

删除background-color属性后的冒号。
在结尾分号后添加一些与评论无关的字符（例如您的评论<--- line 12无效，但我确定您将其放入上面的插图中）。
在（a）颜色，（b）百分比或（c）括号之后添加结束引用。（b） - 100%'的一个例子。可能还会有一些其他字符也会导致它，但是有些字符只是在语法错误中打印到css中。
在属性名称前面的属性名称用空格或其他无效字符分隔的字符，例如y background-color或*background-color。

显然，上面显示的代码中没有一个存在，但您可能会仔细检查您的实际代码是否没有可能导致问题的额外字符或缺少字符。

LessCSS：在连接类中嵌套函数

3 个答案: