1

現在、LESSCSSでグラデーションの単一の定義ポイントを作成しようとしています。クロスブラウザーCSSコードを作成する関数を作成しましたが、解決できない問題が1つあります。

グラデーションを一度指定して、ホバー時に2つの色変数を交換する別の関数（引数「flip」をリッスンする）を使用したいと思います。以下に例を投稿しました。

    selector { .background-gradient(rgba(27, 117, 185, .35), 48%, rgba(22, 97, 154, .35), 52%); }
    selector:hover { .background-gradient(flip); }

私は解決策を探していましたが、もちろん何も見つかりませんでした。要約すると、セレクターのグラデーション値を読み取り、それらを使用して色を入れ替えてホバースタイルを作成する関数が必要です。それが可能であることを願っています。

前もって感謝します！

PS：「フリップ」（パターンマッチング）をリッスンする関数を作成することは問題ではありませんが、私が実際に達成しようとしていることをよりよく理解できると思いました。

4

1 に答える 1

1

あなたが望むものは100％明確ではありませんが、このようなものを持っていないのはなぜですか

.selector {
  @startCol: rgba(27, 117, 185, .35);
  @startPercentage: 48%;
  @endCol: rgba(22, 97, 154, .35)
  @endPercentage: 52%;
  .gradient(@startCol, @startPercentage, @endCol, @endPercentage);
  &:hover {
    .gradient(@endCol, @endPercentage, @startCol, @startPercentage);
  }
}

ホバーでフリップするのが一般的である場合は、上記をミックスインにすることができ、クラス/グラデーションの定義ごとに 1 回呼び出すだけで済みます。

以前に関数に渡された引数を mixin が認識したり、値の配列を使用して mixin を呼び出したりする方法はありません。

于 2012-07-05T04:55:04.980 に答える