Less CSS：在连接类中嵌套函数答案

【问题标题】：LessCSS: Nesting functions within concatenated classesLess CSS：在连接类中嵌套函数
【发布时间】：2013-02-13 06:00:20
【问题描述】：

我在让 LessCSS 使用“&”连接选择器处理具有一系列嵌套规则的文件时遇到了真正的问题。

例如，以下将正常工作：

.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%);
            }
        };
    }
}

我在这方面找不到任何参考资料，但我确定我不是唯一的？

非常感谢。

【问题讨论】：

标签： css nested less rules mixins

【解决方案1】：

我是个白痴，没有注意到第 12 行冒号后面的制表符。

这就是导致错误的原因，但只有当 css 混合/变量较少时。向所有人道歉。

【讨论】：

【解决方案2】：

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

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

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

【讨论】：

【解决方案3】：

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

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

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

尝试将其粘贴（没有您的

编辑： 最后还有一个分号，它破坏了 less 解析器的旧版本 (

【讨论】：

我试过这个并收到同样的错误。我也尝试将颜色定义为变量，但这似乎没有帮助。
我不知道，现在以多种方式尝试了您的确切代码，但它似乎对我有用。对不起......我无法重现错误。