1

おそらくご存じのとおり、LESS は多くのクロマティック指向の操作 (例: darken()、lighten()およびmix()) を提供し、それらはすべてうまく機能します。残念ながら、理論的に最も優れた機能の 1 つである、ユーザーが指定した色とは対照的な色を自動的に設定する機能を実行することはできません。公式の LESS 仕様から:

contrast(@color1, [@darkcolor: black], [@lightcolor: white], [@threshold: 43%]);

したがって、私の LESS には基本的に、さまざまな背景変数が用意されており (私はテーマベースの Web サイトで作業しています)、そのテキストの色は適応する必要があります。

   &.popup{
      .body{
         background-color: @popupBg;
         color: contrast(@popupBg, [@darkcolor: black], [@lightcolor: white], [@threshold: 43%]);
      }
   }

コンソールで出力コードを調べると、関数が適切に解析されていないことがわかります (Chrome はエラーを通知し、Firefox はエラーを非表示にするだけです)。また、単純化されたバージョンも試してみましたが、これはcolor: contrast(@popupBg);運が悪かっただけです。

誰もこれを以前に使用したことがありますか？私は LESS をかなり長い間使用してきましたが、問題が発生したのはこれが初めてです。

4

2 に答える 2

8

角かっこはオプションの引数を表し、コードには表示されません。LESS function reference とそのドキュメント on contrastcontrastを確認してください。正しい使用方法の例があります。

Example:

contrast(#aaaaaa)
contrast(#222222, #101010)
contrast(#222222, #101010, #dddddd)

Output:

#000000 // black
#ffffff // white
#dddddd

したがって、コードは次のようになります。

color: contrast(@popupBg, black, white, 43%);

一方、 が@popupBg定義されていると確信していますか?

デモについては、この jsfiddleをご覧ください。

于 2013-08-29T08:37:04.620 に答える
0

次のように使用できます。

contrast(@popupBg, lighten(black, 12%), darken(white, 12%));
于 2018-06-04T14:01:10.890 に答える