11

次の構成の.lessスタイルシートがあります。

@width:600;

.some-style
{
    width:@{width}px;
}

これにより、次のエラーが発生します。

Expected '}' on line x in file '..\styles.less'

px変数を次のサフィックスと区別する必要があるため、これらの中括弧が必要です（@widthpxと呼ばれる変数を検索するため、機能しませんwidthpx）。600 pxまた、有効なCSSではないため、スペースを使用できません。中括弧の代わりに括弧を使用しても機能しません。

私はここで何が間違っているのですか？

更新：パッケージマネージャーから最新バージョンの.lessをインストールしましたが、動作は少し良くなりましたが、致命的な欠陥があります。

   width:@(width)px;  <--note the parentheses

これでコンパイルされますが、このCSSを出力します。

  600 px  <--note the space, which is invalid CSS, thus useless.

解決済み：ScottSは私に解決策を指摘しました。彼の2つの方法に加えて、コンパイラは文字列に対して数学を実行できるようです。したがって、これは機能します。

@width:600px;

.some-style
{
    width:@width / 2;  <--correctly emits "300px"
}
4

2 に答える 2

15

したがって、私が正しく理解している場合はwidth、値を指定しますが、単位は指定せず、呼び出し時に単位を割り当てます。なぜそれをしたいかはわかりませんが、2つの方法があります。

ONE：width文字列を作成してから、文字列補間を実行します。

@width: '600';

.some-style
{
    width: ~'@{width}px';
}

TWO：乗算1px：

@width: 600;

.some-style
{
    width: @width * 1px;
}

「無次元」の場合と、後で単位を追加する方法については、上記の回答を残しました（質問は最初はそうであったように見えたため）。しかし、あなたのコメントに基づいて、なぜ@width: 600pxうまくいくのかを説明させてください。LESSはそれを文字列として認識しません（あなたが言うように、あなたはそれを表示します）。むしろ、それは単位を持つ数として見られます。To LESSは、文字列ではなく（引用符で囲まれている場合を除く）、。単位の600px数値です。これが、心配することなく、問題なく操作できる理由です。それらのユニットがまたはまたは他の有効なCSSユニットであるかどうかに関係なくそうすることができます。600pixelsem%

于 2012-12-20T16:31:45.410 に答える
0

ユニット関数を使用するより良い方法もあります。

@width: 600;

.some-style
{
    width: unit(@width, px);
}

これを頻繁に行う場合は、ミックスインを定義できます。

.widthInPx(@w)
{
    width: unit(@w, px);
}

.some-style
{
    .widthInPx(@width);
}
于 2019-06-28T11:51:54.310 に答える