色は、視覚デザインの最も重要な要素の1つです。適切に使用すると、Webサイトやアプリケーションに大きな影響を与える可能性があります。しかし、色理論を知るだけでは、そのような影響を与えるのに十分ではありません。多数の色で簡単かつ正常に動作するには、適切なツールベルトが必要です。幸いなことに、作業するためにたくさんの色関数を提供することにより、この実用的な問題を解決することは少なくなります。 このチュートリアルでは、これらの色関数のいくつかを他の少ない機能と組み合わせて使用する方法を調べて、色の操作のための柔軟で再利用可能なミキシンを生成します。
キーテイクアウト
.Quad（）Mixinは3つのパラメーターを取ります。最初のものは、スキームの基本色を設定します。 2番目は、どの色のバリアントを返すかをMixinに伝えます。 3つ目は、コードのコンパイルが少ないときに使用するCSSプロパティを定義します。 Mixinの本体の内部では、Spin（）関数はクアッドスキームで3つの使用可能な色バリアントを作成し、これらのバリアントがリストに入れられます。抽出（）関数は、2番目のパラメーターで定義された目的のバリアントを取得します。そして最後に、可変補間の助けを借りて、カラーバリアントは定義されたCSSプロパティに割り当てられます。
@<span>base-color: #00ff00; </span>@<span>triad-secondary: spin(@base-color, 120); </span>@<span>triad-tertiary: spin(@base-color, -120);</span>
そして、ここにコンパイルされた出力があります：
CodepenのSitePoint（@SitePoint）のペンXWXMEPを参照してください。
カラーパレットの生成
.<span>analog(@color, @variant, @property) {
</span> @<span>first: spin(@color, 30);
</span> @<span>second: spin(@color, -30);
</span> @<span>list: @first, @second;
</span> <span>@return: extract(@list, @variant);
</span> @<span>{property}: @return;
</span><span>}
</span>
.<span>triad(@color, @variant, @property) {
</span> @<span>first: spin(@color, 120);
</span> @<span>second: spin(@color, -120);
</span> @<span>list: @first, @second;
</span> <span>@return: extract(@list, @variant);
</span> @<span>{property}: @return;
</span><span>}
</span>
.<span>quad(@color, @variant, @property) {
</span> @<span>first: spin(@color, 90);
</span> @<span>second: spin(@color, -90);
</span> @<span>third: spin(@color, 180);
</span> @<span>list: @first, @second, @third;
</span> <span>@return: extract(@list, @variant);
</span> @<span>{property}: @return;
</span><span>}</span>このセクションでは、さまざまな種類のカラーパレットを作成する方法を紹介します。その目的のために、私はそれほど固有のループと条件付きステートメント（Mixin Guards）を使用します。これらのコンストラクトに慣れていない場合は、これらのトピックに関する以前の記事を簡単に見ることができます。
最初の例では、カラーテーブルを生成するミックスインを作成します。カラーピッカーを使用しましたよね？だから、あなたは私が何を意味するのか知っています。.color-palette（）mixinは3つの実際の引数を取ります。最初のものは、パレットのベース色を定義します。 2つ目は、生成するスウォッチ数を定義します。 3つ目は、Spin（）関数に必要なスピンステップを設定します。
実際には、もう1つの議論があります：@index。ただし、ループを機能させるためには内部でのみ使用されます。上記のコードで設定されているため、ループはコードを25回繰り返し、25のCSSクラスを作成します。各クラス名は.swatch- [number]パターン（たとえば、.swatch-1）に続いて構築されます。各スウォッチの色は、スピンステップの現在のインデックスの乗算から導出された値を使用して生成されます。その値は、ループの反復ごとにベースカラーの値に追加されます。これにより、フルカラースペクトルが生成され、同じ色で始まり、終わります（私たちの場合は赤）。
ここにコンパイルされた出力があります：
@<span>base-color: #00ff00; </span>@<span>triad-secondary: spin(@base-color, 120); </span>@<span>triad-tertiary: spin(@base-color, -120);</span>
CodepenでSitePoint（@SitePoint）で少ないカラーパレットを生成するペンを参照してください。
このミックスインを使用して、あらゆる種類のカラーテーブルを作成できます。任意の数のスウォッチと、より大きなスピンステップで。たとえば、90度のスピンステップで4つの見本のみを生成できます。これにより、四角い配色の見本が生成されます。あなたには無限の可能性があります。先に進んで、独自の実験を行います。次の例では、特定の色の色合いと色合いを生成するミックスインを作成します。ウィキペディアによると：
色合いは色と白の混合物であり、明るさを増加させ、色合いは色と黒の混合物であり、軽さを減らします。すぐにわかるように、LessのLighten（）とdarken（）内蔵機能の助けを借りて、色合いと色合いを簡単に作成できます。
.color-palette（）mixinのこのバージョンは、パレットのタイプ（シェードまたは色合い）とベースカラーの2つの実際の引数を取ります。シェードと色合いを切り替えるために、＆オペレーターは、Whenキーワードと組み合わせて使用されます。これは、「シェード」を最初のパラメーターとして使用する場合、darken（）関数を持つコードが使用されることを意味します。
両方の場合の背景色は、それぞれlighten（）またはdarken（）関数によって生成されます。これは、定義された基本色と現在のインデックスに10％を掛けたものを使用します。相対パラメーターに注意してください。調整が現在の値に関連するように、それを含めることが重要です。.<span>analog(@color, @variant, @property) {
</span> @<span>first: spin(@color, 30);
</span> @<span>second: spin(@color, -30);
</span> @<span>list: @first, @second;
</span> <span>@return: extract(@list, @variant);
</span> @<span>{property}: @return;
</span><span>}
</span>
.<span>triad(@color, @variant, @property) {
</span> @<span>first: spin(@color, 120);
</span> @<span>second: spin(@color, -120);
</span> @<span>list: @first, @second;
</span> <span>@return: extract(@list, @variant);
</span> @<span>{property}: @return;
</span><span>}
</span>
.<span>quad(@color, @variant, @property) {
</span> @<span>first: spin(@color, 90);
</span> @<span>second: spin(@color, -90);
</span> @<span>third: spin(@color, 180);
</span> @<span>list: @first, @second, @third;
</span> <span>@return: extract(@list, @variant);
</span> @<span>{property}: @return;
</span><span>}</span>注：2つのミキシンが1つと同じ名前を共有することを心配しないでください。パターンマッチング機能のおかげで、使用するものがどれもわかりません。
ここにコンパイルされた出力があります：
CodepenでSitePoint（@SitePoint）で少ない色でカラースウォッチを生成するペンを参照してください。 要約
色や、より少ないものによって提供される多数の色関数でできることは他にもたくさんあります。でもねえ、10,000語のチュートリアルが欲しくないよね？指定された例は、あなたを始めて、利用可能な可能性の概要を提供するのに十分です。より深く潜り、実験を続けるのはあなた次第です。ハッピーレスコーディング！より少ないものを使用して配色を作成するには、基本色を定義し、より少ない関数を使用してその色のバリエーションを作成することが含まれます。たとえば、明るい関数と暗い関数を使用して、基本色の明るい色合いと暗い色合いを作成できます。また、飽和関数と飽和関数を使用して、色の強度を調整し、スピン関数を調整して補完的な色を作成することもできます。これらの機能を組み合わせることで、幅広い配色を作成できます。
プリントデザインには少ないもので色の錬金術を使用できますか？ Webデザインに使用すると、印刷デザインにも使用できます。より少ないものを使用して配色を作成してから、印刷デザインソフトウェアで使用できるCSSファイルとしてエクスポートできます。ただし、色空間の違いにより、画面や印刷で色が異なるように見える場合があります。オンラインで、より少ない色の錬金術の詳細を学びます。まず、公式の少ないドキュメントを読むことから始めることができます。これは、言語とその機能の包括的な概要を提供することです。また、多くのチュートリアルやガイドが利用可能です。
はい、モバイルアプリのデザインには少ない色で色の錬金術を使用できます。少ないほど、モバイルアプリを含むさまざまなプラットフォームで使用できる一貫した配色を作成できます。これは、すべてのプラットフォームで一貫したユーザーエクスペリエンスを確保するのに役立ちます。
以上がより少ない色の錬金術：配色とパレットの作成の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
