6

ミックスインの CSS コメントで LESS 変数を使用することは可能ですか? スプライトに必要です。

例（機能しない/画像パスのみが置き換えられます）：

.sprite (@width) {
    /** sprite: sprite-@{width}; sprite-image: url('../img/@{width}/sprite-@{width}.png'); sprite-layout: vertical */

    .picture {
        background-image: url('../img/@{width}/picture.png'); /** sprite-ref: sprite-@{width}; */
    }
}

.sprite(800);

おまけの質問:lessc でコンパイルした後、background-image と sprite-comment の間の改行を防ぐことはできますか?

4

3 に答える 3

2

いいえ、コメントで変数を使用することはできません。

ブラウザによって無視されるプロパティ「コメント」を追加するのはどうですか。

たとえば、エスケープされた文字列を使用することができます

prop: ~"url('blah'); /* comment */";

しかし、それは 2 つのセミコロン (有効な CSS) を生成し、かなりハックです。

于 2012-08-22T17:09:41.210 に答える
2

Kentico (.NET CMS) にフィードされる自動化されたセマンティック コメントが欲しかったので、この質問に出くわしました。受け入れられた答えは少し満足できないように見えたので、私は自分でいくつかのことを試し、どうにかしてより良い解決策を生み出すことができました. おそらくこれは、それ以降の less 構文の変更によるものです...

// DEFINITIONS
@A:   (~"A Standard");
@X-1: (~"1 General");

// BASIC DEFINITIONS
@start: (~"/*# ");
@end:   (~" #*/");
@sep:    (~" / ");

// FORMULA
@{start} @{A} @{sep} @{X-1} @{end}
* { text-decoration: none; }

出力は次のとおりです。

/*# A Standard / 1 General #*/ * {
     text-decoration: none;
}

私を悩ませているのは、コメントの後に改行がないことだけです。残念ながら、js 関数を評価できない dotless Compiler を使用しています。最後に空のコメントを追加しました。これでうまくいきました。

browser-version を使用する場合は、次の変数を使用して新しい行を挿入できます。

@nl: (~`"\n"`)

...その結果：

@{start} @{A} @{sep} @{X-1} @{end} @{nl}
于 2013-05-08T07:15:02.303 に答える
0

私は良い解決策を持っています：

ファイルを作成して名前を付けstart-comment.css、ファイル内にこのコンテンツを正確に追加し/*、別のファイルを作成し、end-comment.cssこれのみを追加し*/、最後に別のファイルを作成します。たとえばdescription.txt、そこに、コメントに必要なすべてのコンテンツをファイルに追加し.lessます次のコードを追加します。

@import (inline) "start-comment.css";
@import (inline) "description.txt";
@import (inline) "end-comment.css";

最後に、次のようなものが得られます。

/*
(The content that i add in my text file)
*/
于 2015-08-08T04:43:39.330 に答える