>TIL:CSS変数の作成

3590 ワード
TIL CSS テキストリンク

🙋🏻‍♀️ 目標:面接準備前に知った内容の概念を整理する.

1.CSS変数を作成する理由


🙌プロジェクトの規模が拡大するにつれて、CSSもメンテナンスのためにいくつかの基本的な作成を行う必要があります.
これは定数変数で、MDNにも積極的に推奨されているページがあります.
これにより、私たちが作成したコードがハードコーディングされることを防止できます.

  • ソース
    mdn: Custom properties (--*): CSS variables

    • 2.CSS変数の作成方法


    🙌書き方はとても簡単です.var()と--の記号を使って終わりました.
    キーワード💡: var() calc() 
    *선언
:root {
<!-- Font size -->
--font-large : 32px;
--font-medium: 16px;
--font-small: 12px;
--font-micro: 8px;
<!-- Background color -->
--background-color: pink;
<!-- Spacing -->
--base-space: 8px;
<!-- Text color -->
--text-color: white;
}

*할당
.card__title {
font-size: var(--font-large, 32px); // 선언된 변수가 없다면 32px을 주세요.
background-color: var(--background-color);
margin-left: calc(var(--base-space) * 2);
}

*media screen and (max-width: 768px) {
:root {
--background-color: red;
--text-color: black;
--base-space: 4px;
}
    iOS 3種類のマルチスレッド比較
    JWT(Json Web Token)とは?