SimpleLESS 和 LESS CSS 语法/验证失败；另一双眼睛看看为什么这不起作用？答案

【问题标题】：SimpleLESS and LESS CSS syntax / validation fail; another pair of eyes to see why this is not working?SimpleLESS 和 LESS CSS 语法/验证失败；另一双眼睛看看为什么这不起作用？
【发布时间】：2012-05-11 08:26:27
【问题描述】：

已解决：使用 WinLESS 而不是 SimpleLESS。

我正在使用Semantic Grid System（太棒了）并且我正在尝试使用SimpleLESS 将我的LESS 样式表预编译为CSS（因为PyroCMS 2.1 不允许我设置传递参数来设置“type=text/less”的样式表——Pyro 要求所有样式表链接都变成“type=text/css”——因此我不能包含“less.js”文件）。

我想补充一点，这个 WAS 使用 less.js...

无论如何，SimpleLESS 似乎适用于普通的旧 LESS 文件，但其中的某些内容会产生“未定义在线未定义”并且不会编译：

@import '/addons/shared_addons/themes/base/css/less/reset.css';
@import '/addons/shared_addons/themes/base/css/less/grid.less';
@import '/addons/shared_addons/themes/base/css/less/site.less';

@import '/addons/shared_addons/themes/base/css/uomless.css';
@import '/addons/shared_addons/themes/base/css/%23fish/superfish.css';

//////////
// GRID //
//////////

// Specify the number of columns and set column and gutter widths
@basefont: 16;

@columns: 12;
@column-width: 60;
@gutter-width: 20;

// Comment the definition below for a pixel-based layout
@total-width: 100%;


html {

}

body {
    position: absolute;   /*top-most container absolute sections inherit for relative position of descendants */
}

// center the contents
div.center {
    width: 88%;  /* No pixel-width limit, but we want side margins  */
    margin: 0 auto;
    overflow: hidden;
}

header, section, aside, footer, nav, tickr, login, rads, gads {
    z-index: -1;        /*z-inex must be negative for plane breaking: http://www.vanseodesign.com/css/css-stack-z-index/ */
    padding-top: 3px;
    padding-bottom: 3px;
}

header {
    .column(6);
    margin-top: 12px;
    margin-bottom: 12px;
    height:auto !important;
    height: 130px;
    min-height: 130px;
    max-height: 130px;
    padding-bottom: 0px;
}

dashboard {
    .column(6);
    margin-top: 12px;
    height:auto !important;
    height: 100px;
    min-height: 100px;
    max-height: 100px;
    padding-bottom: 0px;
}

login {
    .column(3);
    margin-top: 12px;
    padding-bottom: 0px;
}


nav {
    .column(12);
    margin-top: 3px;
    margin-bottom: 12px;
}



footer {
    .column(12);
    margin-bottom: 0px;
}


section {
    .column(7);
    margin-bottom: 12px;
}

appspace {
    .column(12);
    margin-bottom: 12px;
}

aside {
    .column(3);
    margin-bottom: 12px;
}

rads {
    .column(2);
    margin-bottom: 12px;
}


tickr {
    .column(10);
    margin-bottom: 0px;
}

@media screen and (max-width: 720px) {
    header, section, aside, footer, nav
    {
        .column(12);
        margin-bottom: 1em;
    }
}

有人知道验证 LESS 以查找语法错误的方法吗？

任何帮助将不胜感激。

无耻

感谢您的建议；我尝试了以下操作，SimpleLESS 错误消息没有任何变化：

@import '/addons/shared_addons/themes/base/css/less/reset';
@import '/addons/shared_addons/themes/base/css/less/grid';
@import '/addons/shared_addons/themes/base/css/less/site';

@import '/addons/shared_addons/themes/base/css/uomless.css';

还有：

@import 'less/reset';
@import 'less/grid';
@import 'less/site';

@import 'uomless.css';

和：

@import 'grid';

【问题讨论】：

请发布您自己问题的答案并接受它，而不是在问题本身中发布解决方案。

标签： less

【解决方案1】：

原因是因为一个 CSS 导入引用没有改变，所以服务器会正常检索它们。 LESS 导入尝试实际提取该文件并将其直接包含在文档中，因此您的路径应该相对于正在执行导入的文档，因为该导入实际上是在编译 LESS 时运行的，而不是在从服务器。

【讨论】：

【解决方案2】：

问题似乎出在这两行

@import '/addons/shared_addons/themes/base/css/less/grid.less';
@import '/addons/shared_addons/themes/base/css/less/site.less';

（你也有%23fish，但我认为它不在你的原始代码中，所以跳过它）

只有@include 中以.less 结尾的文件，但我无法告诉你为什么会发生这种情况。

尝试重命名文件和/或尝试不使用 .less 扩展名。

【讨论】：

感谢您的建议；查看编辑以发布测试结果。再次感谢。
是的，但是 grid.css 和 site.css 有效……哈哈，SimpLess 似乎无法导入 LESS 文件。该死！顺便说一句，它是纯 JS，您可以查看源代码并发布 github 问题 here

【解决方案3】：

有人知道验证 LESS 以查找语法错误的方法吗？

我看到您使用的是 Mac：我喜欢 Codekit - 它会在预编译您设置为观看的文件时验证并显示错误。

http://incident57.com/codekit/

如果你在 node 中使用 less，错误会（我认为这是默认设置）打印到控制台。

【讨论】：

【解决方案4】：

当我在我的 LESS 中看不到语法错误时，我使用 http://lesstester.com/（在线 LESS 检查器）。快速和简单

还有另一个带有在线 LESS 检查器的 SO 线程：Is there an online tool to compile LESS?

【讨论】：