@<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）を使用します。これらのコンストラクトに慣れていない場(chǎng)合は、これらのトピックに関する以前の記事を簡(jiǎn)単に見ることができます。

.color-palette（）mixinは3つの実際の引數(shù)を取ります。最初のものは、パレットのベース色を定義します。 2つ目は、生成するスウォッチ數(shù)を定義します。 3つ目は、Spin（）関數(shù)に必要なスピンステップを設(shè)定します。

各スウォッチの色は、スピンステップの現(xiàn)在のインデックスの乗算から導(dǎo)出された値を使用して生成されます。その値は、ループの反復(fù)ごとにベースカラーの値に追加されます。これにより、フルカラースペクトルが生成され、同じ色で始まり、終わります（私たちの場(chǎng)合は赤）。

ここにコンパイルされた出力があります：

@<span>base-color: #00ff00;
</span>@<span>triad-secondary: spin(@base-color, 120);
</span>@<span>triad-tertiary: spin(@base-color, -120);</span>

CodepenでSitePoint（@SitePoint）で少ないカラーパレットを生成するペンを參照してください。

色合いは色と白の混合物であり、明るさを増加させ、色合いは色と黒の混合物であり、軽さを減らします。

すぐにわかるように、LessのLighten（）とdarken（）內(nèi)蔵機(jī)能の助けを借りて、色合いと色合いを簡(jiǎn)単に作成できます。

.color-palette（）mixinのこのバージョンは、パレットのタイプ（シェードまたは色合い）とベースカラーの2つの実際の引數(shù)を取ります。シェードと色合いを切り替えるために、＆オペレーターは、Whenキーワードと組み合わせて使用??されます。これは、「シェード」を最初のパラメーターとして使用する場(chǎng)合、darken（）関數(shù)を持つコードが使用されることを意味します。

.<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つと同じ名前を共有することを心配しないでください。パターンマッチング機(jī)能のおかげで、使用するものがどれもわかりません。

CodepenでSitePoint（@SitePoint）で少ない色でカラースウォッチを生成するペンを參照してください。 要約

色の錬金術(shù)についてはよくある質(zhì)問が少ない

色の錬金術(shù)とは何ですか？それはどのように機(jī)能しますか？これにより、変數(shù)、ミキシン、機(jī)能、およびより保守性、テーマ、拡張可能なCSSを作成できる他の多くの手法を定義できます。少ないと、ベースカラーを作成してから、関數(shù)を使用して色を明るく、暗く、飽和、飽和、脫飽和、スピン、および混合して、ウェブサイトまたはアプリケーションの調(diào)和のとれた配色を作成できます。より少ないものを使用した配色？

より少ないものを使用して配色を作成するには、基本色を定義し、より少ない関數(shù)を使用してその色のバリエーションを作成することが含まれます。たとえば、明るい関數(shù)と暗い関數(shù)を使用して、基本色の明るい色合いと暗い色合いを作成できます。また、飽和関數(shù)と飽和関數(shù)を使用して、色の強(qiáng)度を調(diào)整し、スピン関數(shù)を調(diào)整して補(bǔ)完的な色を作成することもできます。これらの機(jī)能を組み合わせることで、幅広い配色を作成できます。

色の錬金術(shù)に使用することの利點(diǎn)は何ですか？これにより、一貫性があり調(diào)和のとれたカラースキームを作成できます。これにより、ウェブサイトやアプリケーションの視覚的な魅力を高めることができます。また、基本色を単純に変更できるため、配色を簡(jiǎn)単に調(diào)整できます。殘りの色は自動(dòng)的に更新されます。さらに、スケーラブルで再利用可能な配色を作成することができます。これにより、長(zhǎng)期的には時(shí)間と労力を節(jié)約できます。 >より少ないものは、カラースキームを作成する能力の観點(diǎn)から、SASSのような他のCSSプレセッサーに似ています。ただし、シンプルな構(gòu)文が少なく、學(xué)習(xí)が容易であるため、初心者に適した選択肢になります。また、色を操作するための堅(jiān)牢な機(jī)能セットがあり、配色をより強(qiáng)く制御できます。

プリントデザインには少ないもので色の錬金術(shù)を使用できますか？ Webデザインに使用すると、印刷デザインにも使用できます。より少ないものを使用して配色を作成してから、印刷デザインソフトウェアで使用できるCSSファイルとしてエクスポートできます。ただし、色空間の違いにより、畫面や印刷で色が異なるように見える場(chǎng)合があります。オンラインで、より少ない色の錬金術(shù)の詳細(xì)を?qū)Wびます。まず、公式の少ないドキュメントを読むことから始めることができます。これは、言語とその機(jī)能の包括的な概要を提供することです。また、多くのチュートリアルやガイドが利用可能です。

モバイルアプリのデザインには少ない色で色の錬金術(shù)を使用できますか？

はい、モバイルアプリのデザインには少ない色で色の錬金術(shù)を使用できます。少ないほど、モバイルアプリを含むさまざまなプラットフォームで使用できる一貫した配色を作成できます。これは、すべてのプラットフォームで一貫したユーザーエクスペリエンスを確保するのに役立ちます。

色の錬金術(shù)に使用するには、色の錬金術(shù)に使用するために使用する必要があるツールは、テキストエディターが必要になります。より少ないコードとより少ないコンパイラを記述して、より少ないコードをCSSにコンパイルします。利用可能な無料で有料のテキストエディターと少ないコンパイラがありますので、あなたのニーズと好みに最適なコンパイラを選択できます。