4

Koala や Prepros (OSX 10.10.5、Yosemite) などの Less 前処理ツールで構文の問題が発生しており、簡略化した 16 進数で定義した色の値 (#fff、#000 など) が出力されます。最終的な .css ファイルとして、#fffffffまたはその中に。#000000

これが私が観察したことの簡単な例です：

// In variables.less (css-preprocessed/variables.less)
@white: #fff;

// In styles.less (css-preprocessed/application/less/styles.less)
@import '../../variables.less';
.container {
    background-color: @white;
}

// In styles.css (css-preprocessed/application/css/styles.css)
.container {
    background-color: #ffffff;
}

この問題はかなり最近のものであることに注意してください。これらの各ツールの設定を拡張していません。それぞれがすぐに使用できます。

4

1 に答える 1

5

これは、Less コンパイラの古いバージョンでは常に動作していました。省略形の色の値は、常に 16 進数の省略形の値に変換されます。これは v 2.5.2 リリースの一部として修正されており、値が 1 つとして提供された場合、値は短縮形のままになります。

Less Changelogから:

省略形の色は省略形のままです

そのため、コンパイラを最新バージョンにアップグレードすると、この問題は自動的に解消されます。

最新バージョンでは、次の Less コード: [試してみる]

@white: #fff;
.container {
  background-color: @white;
}

にコンパイルします

.container {
  background-color: #fff;
}

注: Less コンパイラの移植バージョン (Less4j や LessPHP など) を使用している場合は、変更ログをチェックして、この動作がいつ採用されたかを確認する必要がある場合があります (まだ行っていない場合は、機能要求を出します)。まだ）。

すべての古いバージョンでは、省略形の色はいつでも長い形式に変換されます。

  • 色はプロパティに直接割り当てられませんが、変数を介して割り当てられます。
  • color 変数の値は、文字列ではなく色自体として提供されます。つまり、値は引用符で囲まれていません (出力中にエスケープされます)。

コンパイラのバージョンをアップグレードできない場合、ロングハンド形式への変換を回避する唯一の方法は、変数の値を引用符で囲み、出力中にエスケープすることです。これを行うと、Less コンパイラはそれを文字列として扱い、値をそのまま出力します。

古いバージョンでは、次の Less コード:

@a: #fff;
@b: "#fff";
a{
  color-1: #fff;
  color-2: @a;
  color-3: ~"@{b}";
}

にコンパイルします

a {
  color-1: #fff;
  color-2: #ffffff; /* note how this is converted */
  color-3: #fff; /* while this isn't */
}

これを行うと、値に対して実行するすべてのカラー チャネル操作に影響し、関数を使用してカラー オブジェクトに変換する必要があることに注意してくださいcolor()。本質的に非常に小さな問題を回避するためだけにこれを行うことはお勧めしません。

于 2015-11-05T04:52:00.900 に答える