이 페이지는 Cloud Translation API를 통해 번역되었습니다.

CSS 변수 - 중요한 이유

Rob Dodson

더 정확하게는 CSS 맞춤 속성으로 알려진 CSS 변수 Chrome 49부터 시작됩니다 CSS에서 반복을 줄이는 데 유용할 수 있습니다. 또한 테마 전환과 같은 강력한 런타임 효과를 사용할 수 있으며 향후 CSS 기능 확장/폴리필링

CSS 혼잡성

일반적으로는 애플리케이션을 설계할 때 일련의 브랜드를 따로 두고 앱의 모양을 일관되게 유지하기 위해 재사용되는 색상입니다. 안타깝게도 CSS에서 이러한 색상 값을 반복해서 반복하는 것은 번거로울 뿐만 아니라 오류가 발생하기 쉽습니다. 특정 시점에 색깔 중 하나가 변경해야 한다면 바람에 부딪히면서 '찾기 및 바꾸기'에 주의를 기울여야 할 수도 있습니다. 하지만 프로젝트 규모가 크면 위험해지기 쉽습니다.

최근에는 많은 개발자가 SASS 또는 전처리기 변수를 사용하여 이 문제를 해결하는 LESS. 동안 이러한 도구는 개발자의 생산성을 엄청나게 향상시켰고, 정전기 발생이 가능하고 런타임 시 변경됩니다. 런타임 시 변수를 변경할 수 있는 기능을 추가하면 동적 애플리케이션 테마 설정과 같은 기능을 도입할 수 있을 뿐 아니라 반응형 디자인에 미치는 영향과 향후 CSS에 폴리필할 수 있는 가능성 기능을 살펴보겠습니다 Chrome 49가 출시됨에 따라 이제 이 기능을 CSS 사용자 지정 속성의 형태를 갖출 수 있습니다.

커스텀 속성 요약

맞춤 속성은 CSS 도구 상자에 두 가지 새로운 기능을 추가합니다.

작성자가 작성자가 선택한 이름
작성자가 이러한 값을 다른 제품에서 사용할 수 있도록 하는 var() 함수 속성

간단한 예를 통해

:root {
    --main-color: #06c;
}

#foo h1 {
    color: var(--main-color);
}

--main-color는 작성자가 정의한 맞춤 속성이며 값이 #06c입니다. 참고 모든 커스텀 속성이 대시 2개로 시작해야 합니다.

var() 함수는 자체를 검색하여 맞춤 속성으로 바꿉니다. 값에서 color: #06c;이 발생합니다. 맞춤 속성이 정의된 한 스타일 시트의 어딘가에 var 함수에서 사용할 수 있어야 합니다.

처음에는 구문이 약간 이상하게 보일 수 있습니다. 많은 개발자가 변수 이름에 $foo를 사용하시겠습니까?" 이 접근 방식은 특히 향후 $foo 매크로를 허용할 수 있습니다. 비하인드 스토리는 이 게시물을 참고하세요. 사양 작성자 중 한 명인 Tab Atkins가 언급했습니다.

커스텀 속성 문법

맞춤 속성의 문법은 간단합니다.

--header-color: #06c;

맞춤 속성은 대소문자를 구분하므로 --header-color 및 --Header-Color는 다른 맞춤 속성입니다. 이러한 것들이 매우 단순해 보일 수도 있지만 사용자 지정 속성에 허용되는 구문은 허용됩니다. 예를 들어 다음은 유효한 커스텀 속성입니다.

--foo: if(x > 5) this.width = 10;

이것은 변수로 유용하지 않지만, 어떤 식으로든 유효하지 않기 때문입니다. JavaScript로 읽고 처리할 수 있는 경우 런타임 환경입니다 즉, 맞춤 속성에는 모든 종류의 오늘날의 CSS 전처리기로는 현재 불가능한 흥미로운 기술을 살펴보겠습니다. 그래서 '하품이 있는데도 짜증 나는 사람이라고 생각한다면 한 번 더 보세요. 이러한 변수는 이전에 사용하던 변수가 아닙니다.

폭포

커스텀 속성은 표준 캐스케이드 규칙을 따르므로 동일한 속성이 다양한 특정 유형에 따라

:root { --color: blue; }
div { --color: green; }
#alert { --color: red; }
* { color: var(--color); }

<p>I inherited blue from the root element!</p>
<div>I got green set directly on me!</div>
<div id="alert">
    While I got red set directly on me!
    <p>I’m red too, because of inheritance!</p>
</div>

즉, 미디어 쿼리 내부의 맞춤 속성을 활용하여 사용할 수 있습니다. 한 가지 사용 사례로는 이미지의 너비를 기준으로 다음과 같습니다.

:root {
    --gutter: 4px;
}

section {
    margin: var(--gutter);
}

@media (min-width: 600px) {
    :root {
    --gutter: 16px;
    }
}

위의 코드 스니펫은 미디어 내부에서 변수를 정의할 수 없는 오늘날의 CSS 전처리기는 쿼리합니다. 이 능력이 있으면 엄청난 잠재력을 펼칠 수 있어!

또한 다른 속성에서 값을 가져오는 커스텀 속성을 맞춤 속성입니다. 이는 테마 설정에 매우 유용할 수 있습니다.

:root {
    --primary-color: red;
    --logo-text: var(--primary-color);
}

var() 함수

맞춤 속성의 값을 검색하고 사용하려면 var() 함수를 사용하세요. var() 함수의 문법은 다음과 같습니다.

var(<custom-property-name> [, <declaration-value> ]? )

여기서 <custom-property-name>은 작성자가 정의한 맞춤 속성의 이름입니다. --foo이고 <declaration-value>는 참조된 맞춤 속성이 잘못되었습니다. 대체 값은 쉼표로 구분될 수 있음 단일 값으로 결합됩니다. 예를 들어 var(--font-stack, "Roboto", "Helvetica");는 "Roboto", "Helvetica"의 대체를 정의합니다. 유지 여백 및 패딩에 사용되는 것과 같은 약식 값은 쉼표로 구분되므로 패딩에 대한 적절한 대체는 다음과 같습니다.

p {
    padding: var(--pad, 10px 15px 20px);
}

구성요소 작성자는 이러한 대체 값을 사용하여 요소:

/* In the component’s style: */
.component .header {
    color: var(--header-color, blue);
}
.component .text {
    color: var(--text-color, black);
}

/* In the larger application’s style: */
.component {
    --text-color: #080;
    /* header-color isn’t set,
        and so remains blue,
        the fallback value */
}

이 기법은 그림자를 사용하는 웹 구성요소의 테마를 설정하는 데 특히 유용합니다. DOM을 사용하는 것이 좋습니다. 웹 구성 요소 작성자 대체 값을 사용하여 초기 디자인을 만들고 테마 설정 '후크'를 노출할 수 있습니다. 맞춤 속성의 형태로 제공됩니다

<!-- In the web component's definition: -->
<x-foo>
    #shadow
    <style>
        p {
        background-color: var(--text-background, blue);
        }
    </style>
    <p>
        This text has a yellow background because the document styled me! Otherwise it
        would be blue.
    </p>
</x-foo>

/* In the larger application's style: */
x-foo {
    --text-background: yellow;
}

var()를 사용할 때는 주의해야 할 몇 가지 사항이 있습니다. 변수는 속성 이름 예를 들면 다음과 같습니다.

.foo {
    --side: margin-top;
    var(--side): 20px;
}

하지만 이는 margin-top: 20px; 설정과는 다릅니다. 대신 두 번째 선언이 유효하지 않으며 오류로 발생합니다.

마찬가지로 단순하게는 개발자가 그 중 일부분을 다른 리소스, 변수:

.foo {
    --gap: 20;
    margin-top: var(--gap)px;
}

이는 margin-top: 20px; 설정과는 다릅니다. 데이터 레이크를 값에는 다른 함수, 즉 calc() 함수가 필요합니다.

calc()를 사용하여 값 빌드

이전에 사용해 본 적이 없다면 calc() 함수는 CSS 값을 결정하는 계산을 수행할 수 있는 도구입니다. 모든 최신 브라우저에서 지원되며 사용하여 새 값을 만들 수 있습니다. 예를 들면 다음과 같습니다.

.foo {
    --gap: 20;
    margin-top: calc(var(--gap) * 1px); /* niiiiice */
}

JavaScript에서 맞춤 속성 작업하기

런타임 시 맞춤 속성 값을 가져오려면 getPropertyValue()를 사용합니다. 계산된 CSSStyleDeclaration 객체의 메서드입니다.

/* CSS */
:root {
    --primary-color: red;
}

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

<!-- HTML -->
<p>I’m a red paragraph!</p>

/* JS */
var styles = getComputedStyle(document.documentElement);
var value = String(styles.getPropertyValue('--primary-color')).trim();
// value = 'red'

마찬가지로 런타임 시 맞춤 속성의 값을 설정하려면 CSSStyleDeclaration 객체의 setProperty() 메서드

/* CSS */
:root {
    --primary-color: red;
}

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

<!-- HTML -->
<p>Now I’m a green paragraph!</p>

/* JS */
document.documentElement.style.setProperty('--primary-color', 'green');

다른 맞춤 항목을 참조하도록 맞춤 속성의 값을 설정할 수도 있습니다. 속성을 추가하려면 호출에서 var() 함수를 사용합니다. setProperty()

/* CSS */
:root {
    --primary-color: red;
    --secondary-color: blue;
}

<!-- HTML -->
<p>Sweet! I’m a blue paragraph!</p>

/* JS */
document.documentElement.style.setProperty('--primary-color', 'var(--secondary-color)');

맞춤 속성은 광고주의 이 것이 어떻게 온갖 흥미로운 종류의 런타임 효과를 사용할 수 있습니다.

브라우저 지원

현재 Chrome 49, Firefox 42, Safari 9.1 및 iOS Safari 9.3은 맞춤 속성

데모

사용해 보기 샘플 활용하실 수 있는 흥미로운 기법을 모두 살펴보세요. 맞춤 속성으로 전환할 수 있습니다

추가 자료

맞춤 속성에 대해 자세히 알아보려면 Google 애널리틱스팀에서 맞춤 속성에 관심이 있는 이유에 대한 입문서를 작성했습니다 다른 브라우저에서도 진행 상황을 확인할 수 있습니다. chromestatus.com.