1

解決済み: SimpleLESSの代わりに WinLESS を使用します。

私はSemantic Grid System (素晴らしい) を使用しており、 SimpleLESSを使用して LESS スタイルシートを CSS にプリコンパイルしようとしています ( PyroCMS 2.1 では、スタイルシートを 'type=text に設定するためのパラメータを渡すことができないためです)。 /less" -- Pyro では、すべてのスタイルシート リンクが "type=text/css" になるように義務付けられています。そのため、"less.js" ファイルを含めることはできません)。

これはless.jsを使用して機能していたことを追加したい...

とにかく、SimpleLESS は単純な古い LESS ファイルで動作するように見えますが、このファイルの何かが「undefined on line undefined」を生成し、コンパイルされません:

@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 からの取得時ではなく、LESS のコンパイル時に実際に実行されるためです。サーバー。

于 2012-06-13T18:20:08.050 に答える
0

問題はこれらの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拡張子を付けずに実験してみてください。

于 2012-05-02T05:17:07.330 に答える
0

LESS に構文エラーが表示されない場合は、 http://lesstester.com/ (オンライン LESS チェッカー) を使用します。素早く 簡単_

オンライン LESS チェッカーに関する別の SO スレッドがあります: LESS をコンパイルするためのオンライン ツールはありますか?

于 2014-02-27T14:55:25.157 に答える
0

LESS を検証して構文エラーを見つける方法を知っている人はいますか?

Mac を使用しているようです。これには Codekit が気に入っています。これは、監視するように設定したファイルをプリコンパイルするときに、エラーを検証して表示します。

http://incident57.com/codekit/

ノードで less を使用している場合、エラーがコンソールに出力されます (これがデフォルトだと思います)。

于 2013-09-14T12:20:18.753 に答える