私は node-sass を使用しており、簡単にテーマを変更できる一連のスタイルを構築しようとしています。つまり、たとえば、1 つの色を変更すると、他のさまざまな色が更新されます。
色 (背景色) を取り、明度を決定し、テキストの色として使用するプリセットの暗い色または明るい色を出力する関数があります。これと同じ機能を以前に使用したことがありますが、うまく機能します。これは sass ファイルに含まれており、動作することがテストされています。
@function color-contrast($color) {
@if (lightness($color) > 50) {
@return $color-text-dark; //if the background is more than 50 lightness, return the dark colour
}
@else {
@return $color-text-light; //if not, return the light colour
}
}
ただし、変数宣言内でこの関数を使用しようとしています。ので、私は持っています
$contentbox-text-color: color-contrast($bg-color) ;
($bg-color、$color-text- などはシートの前半で設定)
問題は、$ contentbox-text-color を使用する場所で、色の値として表示されることです
color-contrast(blue);
(ここで、「青」は $bg-color 値です) - 関数の結果ではなく、私が期待するものです。以下に示すように関数を補間してみましたが、結果は同じです
$contentbox-text-color: #{color-contrast($bg-color)} ;
変数 (/結果の色) を mixin の引数として、および他のさまざまな場所で使用するため、変数を介してこの関数にアクセスする必要があります。
私がやろうとしていることを達成する方法を知っている人はいますか? 変数内での関数の使用に関する情報が見つからないため、これが不可能なことなのか、それとも正しく機能させるための構文が欠けているだけなのかわかりません!
ありがとう ：）
簡単な更新: 関数を mixin の引数として直接呼び出すと、これは正しくコンパイルされますが、理想的には、変数名を単純に使用できるようにして、同じ変数を全体で使用できるようにしたいと考えています (何らかの理由で可能ですが、単に変数に依存するのではなく、すべての mixin に移動して引数を更新する必要があるのは面倒です!)