colors - LESSで色を反転する方法

Question

色を反転できる場所がわからない特定の色操作はありますか？私はたくさんのカラーメソッドを見ていますが、これを行う方法を見つけることができませんでした。

参照：

http://lesscss.org/

Answer 1

色の反転には複数の解釈があります。

• 反対の色相の色が必要です。

  spin(@color, 180)

• 現在の色との合計が白である色が必要です。

  #fff - @color

Answer 2

残念ながらinvert()、Lessには機能がありません。

xiaoyiの答えが強調しているように、 Less関数spin()は非常に役立つと思います。赤や青（）などの「カラフルな」色で使用すると、反転した色になりますが、回転する色相があまりないため、非常に暗い色や明るい色では実際には同じ結果が得られません。たとえば、色＃111100にコンパイルされますが、これも非常に暗い色です。spin(red, 180)spin(#000011, 180)

black段落の色を背景が明るい場合に設定しwhite、背景が暗い場合に設定したかったのです。これが私がそれを行う方法ですif()、boolean()そしてluma()：

@bkg-color: #001;
@is-bg-dark: boolean(luma(@bkg-color) > 50%);

.container {
  background-color: @bkg-color;
}

p {
  color: if(@is-bg-dark, black, white);
}

boolean（）などのLess関数の詳細をご覧ください。

Answer 3

色を反転させる特定の機能はないと思いますが、できることは色を変数として設定することです。例えば：

@color1: #666;
@color2: #fff;

body {
background-color: @color1;
color: @color2;
}

h1 {
color: @color2;
}

次に、プライマリスタイルシートで使用される変数に反転色を設定して、代替スタイルシートを作成するだけです。css全体で変数を使用している限り、それらの色は反転します。