CSSシリーズ:パート11 -カスタムプロパティ

一旦あなたのウェブサイトのためにカラーパレットを選ぶならば、あなたはあなたがスタイルシートでそれらの色価値を書く頻度を想像することができます.あなたは同じ色を30以上の場所でプロパティの値として記載することができます!今すぐあなたのクライアントやチームが突然あなたのサイトのカラーパレットを変更する必要がある場合想像してみませんか?あなたは、文書全体を通過し、それらの30 +の値のそれぞれを変更する必要があります!
これを避ける一つの方法は、CSSのカスタムプロパティを使用することです.CSSカスタムプロパティは、ドキュメント全体で再利用される特定の値を含むCSS作者によって定義された変数です.このチュートリアルでは、CSS変数の作成と使用方法を示します.

CSSカスタムプロパティの理解
我々のクライアントが彼らが灰色である彼らのウェブサイト背景が欲しいと思うと言いましょう.そして、すべての境界線は黒いです.フォント色は白であるべきです.しかし、プロジェクトを終了する前に数回変更されることを知っている人が十分に動作したので、カスタムプロパティを設定することにします.次のような色のカスタムプロパティを作成します.
/スタイルシート.CSS

:root {
    --background: gray;
    --border: black;
    --font: white;
    }

root pseudo-classの内部でCSSカスタムプロパティを宣言することで、これらのカスタムプロパティは、プロジェクト全体でグローバルに利用できます.カスタム変数をDIV宣言に割り当てるということは、カスタム変数がDIV型にのみ利用可能であることを意味します.これは、あなたがJavaScriptのような言語に飛び込むように詳細について学びますスコープ、と呼ばれるプロセスのためです.しかし、今のところ、当社のウェブサイトのデザインスタイルシートを使って、これらのカスタムプロパティをプロジェクトに挿入しましょう.
/スタイルシート.CSS

:root {
    --background: gray;
    --border: black;
    --font: white;
    }

div .header {
    background-color: var(--background);
    border: 5px solid var(--border);
    color: var(--font);
    }

h1,
h2,
h3,
h4 {
    color: var(--font);
    }

body {
    background-color: var(--background);
    color: var(--font);
    }

現在、あなたのHTMLはあなたのカスタムのプロパティに割り当てられたプロパティ値でスタイルを整えられます-- background、-- border、-- font.ご覧のように、Webサイト全体のカラーパレットを変更する必要がある場合は、ルート擬似クラス内のカスタムプロパティ宣言に割り当てられたプロパティ値を変更する必要があります.
CSSのカスタムプロパティの利点は色に限定されません、あなたは本当にあなたの想像力によって制限されています.
次のリンクでシリーズの残りの部分に追いつくことができます