Originally posted on devinduct.

소개

CSS 변수는 매우 유용한 기능이며 SASS로 보완했던 작업을 수행할 수 있게 해줍니다. CSS 작성자가 정의하고 프로젝트 내에서 필요할 때마다 재사용할 수 있는 특정 값을 포함합니다. 사용자 지정 표기법을 사용하고 var 함수를 사용하여 액세스합니다.

선언

CSS 변수는 모든 요소에 선언할 수 있으며 다음과 같이 선언합니다.

div {
    --primary-color: green;
}

var 함수를 사용하여 액세스합니다.

div {
    color: var(--primary-color);
}

사용 사례의 예

HTML에 다음 CSS 규칙을 정의하는 사용 사례를 정의해 보겠습니다.

.card-wrapper {
    padding: 1rem;
    display: flex;
    flex-direction: column
}
.card {
    border: 1px solid #0068d8;
    margin-bottom: 0.5rem
}
.card-title {
    padding: 1rem;
    background-color: #007bff;
    color: #fff
}
.card-body {
    padding: 1rem;
    background-color: #76b8ff;
    color: #fff
}

다음 HTML에 적용합니다.

<section class="card-wrapper">
    <article class="card">
        <header class="card-title">
            Card 1
        </header>
        <section class="card-body">
            Lorem ipsum dolor sit amet...
        </section>
    </article>
    <article class="card">
        <header class="card-title">
            Card 2
        </header>
        <section class="card-body">
            Lorem ipsum dolor sit amet...
        </section>
    </article>
    <article class="card">
        <header class="card-title">
            Card 3
        </header>
        <section class="card-body">
            Lorem ipsum dolor sit amet...
        </section>
    </article>
</section>

반복되는 부분을 알 수 있습니까? CSS를 분석한 후 다음 속성이 중복된다는 결론에 도달했습니다.

패딩

칼라

따라서 새로운 CSS 기능을 활용할 수 있습니다. CSS 변수를 사용하여 요소의 패딩과 색상을 정의할 수 있습니다. :root 의사 클래스에서 선언함으로써 이 문제를 극복하고 필요할 때마다 padding와 color를 모두 재사용할 수 있습니다. 업데이트된 CSS는 다음과 같습니다.

:root {
    --primary-color: #fff;
    --primary-padding: 1rem
}

.card-wrapper {
    padding: var(--primary-padding);
    display: flex;
    flex-direction: column
}
.card {
    border: 1px solid #0068d8;
    margin-bottom: 0.5rem
}
.card-title {
    padding: var(--primary-padding);
    background-color: #007bff;
    color: var(--primary-color)
}
.card-body {
    padding: var(--primary-padding);
    background-color: #76b8ff;
    color: var(--primary-color)
}

HTML은 동일하게 유지되며 브라우저에서 페이지를 연 후 결과가 동일해야 합니다.

계승

CSS 변수는 다른 CSS 속성처럼 값을 상속할 수 있습니다. 요소에 대해 값이 설정되지 않은 경우 상위 값이 사용됩니다. 이를 반영하도록 CSS를 업데이트해 보겠습니다.

:root {
    --primary-color: #fff;
    --primary-padding: 1rem
}

.card-wrapper {
    padding: var(--primary-padding);
    display: flex;
    flex-direction: column
}
.card {
    border: 1px solid #0068d8;
    margin-bottom: 0.5rem
}
.card-title {
    --primary-padding: 1.5rem;
    --primary-color: red;
    padding: var(--primary-padding);
    background-color: #007bff;
    color: var(--primary-color)
}   
.card-body {
    padding: var(--primary-padding);
    background-color: #76b8ff;
    color: var(--primary-color)
}

이제 브라우저에서 페이지를 실행하면 각 카드 헤더의 padding 및 color가 1.5rem에 정의된 값 대신 각각 red 및 :root로 설정되어야 합니다. 의사 클래스. 이는 카드 헤더를 제외한 모든 요소가 부모(이 경우 :root 유사 클래스)에서 색상과 패딩을 상속받았음을 의미합니다.

기본(대체) 값

CSS 변수는 기본 또는 대체 값을 지원합니다. 즉, 사용자 정의 CSS 변수가 실패할 경우 사용할 값을 정의할 수 있습니다. 이것은 var 함수에 두 번째 매개변수를 전달하여 수행됩니다. CSS 변수가 정의되지 않은 경우 주어진 값이 대용으로 사용됩니다. 이를 반영하도록 CSS를 업데이트해 보겠습니다.

:root {
    /*--primary-color: #fff; a fallback value is used instead of this variable*/
    --primary-padding: 1rem
}

.card-wrapper {
    padding: var(--primary-padding, 1rem);
    display: flex;
    flex-direction: column
}
.card {
    border: 1px solid #0068d8;
    margin-bottom: 0.5rem
}
.card-title {
    --primary-padding: 1.5rem;
    --primary-color: red;
    padding: var(--primary-padding, 1rem);
    background-color: #007bff;
    color: var(--primary-color, #fff)
}   
.card-body {
    padding: var(--primary-padding, 1rem);
    background-color: #76b8ff;
    color: var(--primary-color, #fff)
}

white 색상을 대체 값으로 정의했기 때문에 출력은 다시 동일해야 합니다. 효과를 보려면 조금 가지고 놀아보세요.

잘못된 값

CSS 변수가 유효하지 않은 값으로 정의된 경우 브라우저는 주어진 속성에 대해 초기 또는 상위 값을 설정합니다.

먼저 속성이 상속 가능한지 확인하고 상속 가능한 경우 부모로부터 값을 가져옵니다(요소에 상속 가능한 경우). 요소에 부모가 없으면 속성의 기본 초기 값이 사용됩니다. 이 동작을 반영하도록 카드 래퍼 및 제목 클래스를 업데이트해 보겠습니다.

...

.card-wrapper {
    padding: var(--primary-padding);
    display: flex;
    flex-direction: column;
    color: orange /* assign a new color here */
}
.card-title {
    --primary-padding: 1.5rem;
    --primary-color: 1px; /* assign an invalid value here */
    padding: var(--primary-padding, 1rem);
    background-color: #007bff;
    color: var(--primary-color, #fff)
}

...

이제 브라우저에서 페이지를 실행하면 카드 헤더의 색상이 orange로 변경됩니다.

동적 사용(JavaScript)

CSS 변수는 JavaScript에서 동적으로 액세스할 수 있습니다. 다른 속성과 마찬가지로 값을 가져오거나 설정할 수 있습니다.

const el = document.querySelector(':root');

// get the value
const padding = el.style.getPropertyValue('--primary-padding');

// set the value
el.style.setProperty('--primary-padding', '3rem');

다가오는

CSS 변수에 대한 다음 기사에서는 더 유용한 예제를 다루고 간단한 테마 스위처를 만들 것입니다. my blog에서 업데이트를 확인하세요 :)

추가 읽기

체크 아웃 browser compatibility
이것을 확인하십시오 article