1

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


我正在使用语义网格系统(非常棒)并且我正在尝试使用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';

4

4 回答 4

1

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

于 2012-06-13T18:20:08.050 回答
0

有谁知道验证 LESS 以查找语法错误的方法?

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

http://incident57.com/codekit/

如果您在 node 中使用 less,错误(我认为这是默认设置)会打印到控制台。

于 2013-09-14T12:20:18.753 回答
0

当我在我的 LESS 中看不到语法错误时,我使用http://lesstester.com/(在线 LESS 检查器)。 快速 简便_

还有另一个带有在线 LESS 检查器的 SO 线程:是否有编译 LESS 的在线工具?

于 2014-02-27T14:55:25.157 回答
0

问题似乎出在这两行

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

(你也有%23fish,但我认为它不在你的原始代码中,所以跳过它)

唯一以 .@include结尾的文件.less,但我无法告诉您为什么会发生这种情况。

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

于 2012-05-02T05:17:07.330 回答