CSS Custom Properties (커스텀속성) 소개

(https://www.smashingmagazine.com/2017/04/start-using-css-custom-properties/ 문서를 토대로 번역하고, 다른 문서들을 조합해 정리하였습니다.)

1. 전처리기 변수와 CSS 커스텀 속성

오늘날 CSS 전처리기는 웹개발에서 중요한 역할을 수행하고 있습니다. (Sass, Stylus, Less, PostCSS 등)
전처리기의 주요 장점 중 하나는 변수를 사용할 수 있다는 것인데요. 변수를 사용하면 복붙을 피할 수 있고, 개발과 리팩토링이 간단해집니다.
그러나, 전처리기 변수에는 다음과 같은 몇가지 한계가 있습니다.

• 동적으로 변경할 수 없다.
• DOM 구조를 알지 못한다.
• JavaScript에서 읽거나 변경할 수 없다.

이러한 문제를 해결하기 위해 CSS 커스텀 속성이 개발되었습니다. 전처리기와 CSS 커스텀 속성 두 가지가 어떤 점이 다른지는 아래에서 더 자세히 알아보도록 하겠습니다.

2. CSS 커스텀 속성

CSS 커스텀 속성은 작성자가 정의한 속성의 집합입니다. 작성자는 임의로 정한 이름의 속성에 임의의 값을 할당할 수 있습니다. “CSS 변수”라고 부르기도 하지만 올바른 이름은 “CSS 커스텀 속성”입니다. CSS 커스텀 속성은 아래와 같이 정의할 수 있습니다.

:root {
  --var-name: value;
}

• root{}
  커스텀 속성을 전역으로 사용하고자 할 때, :root {} 에 커스텀 속성을 정의합니다.
  커스텀 속성은 CSS 변수처럼 [속성]: [값]; 의 구문을 따르기 때문에 반드시 범위(중괄호) 내에 정의되어야 합니다.
• –var-name
  커스텀 속성의 이름입니다. 이름은 —(이중 하이픈)로 시작하며, 속성 이름은 작성자가 정의합니다.
  CSS 커스텀 속성은 CSS 변수처럼 보이고 작동하며, 보통은 속성 이름에 작동 방식을 반영합니다.
  그리고 다른 CSS 속성들과는 달리 CSS 커스텀 속성은 대소문자를 구분합니다.
• value
  커스텀 속성의 값입니다. 값에는 모든 CSS 값이 들어갈 수 있습니다.(색상, 문자열, 레이아웃값, 표현식 등)

:root {
    --main-color: #f00;
    --main-bg: #0f0;
    --border-color: #ff0;
    --header-height: 70px;
    --content-padding: 10px 20px;
    --base-line-height: 1.5;
    --transition-duration: 0.5s;
    --external-link: "external link";
    --margin-top: calc(2vh + 20px);
    /* 유효 커스텀 속성은 후에 JavaScript에서 재사용될 수 있다. */
    --foo: if(x > 5) this.width = 10;
}

3. CSS 커스텀 속성 사용하기

커스텀 속성을 사용하려면 var() 함수 안에 속성 이름을 적어 사용합니다.

.foo {
  color: var(--var-name);
}

var() 함수는 fallback을 제공합니다.
이는 쉼표로 구분되는데,var() 함수 안에서 첫 번째 쉼표 뒤의 값이 fallback으로 간주됩니다.

var() 함수 문법: var( <custom-property-name> [, <declaration-value> ]? )
첫번째 인수는 대체할 커스텀 속성 이름을 적습니다. 두번째 인수는 대체 값으로, 커스텀 속성이 유효하지 않을 경우 사용됩니다.

See the Pen VWrmJV by WITBLOG (@witblog) on CodePen.

 
커스텀 속성 사용시 기본 연산자를 사용 하고자 할때는 CSS가 제공하는 calc() 함수를 사용합니다. 이는 커스텀 속성의 값을 변경한 후 브라우저가 표현식을 재계산하게 합니다.
아래와 같이 사용할 수 있습니다.

See the Pen wePgvB by WITBLOG (@witblog) on CodePen.

단위가 없는 경우, calc() 함수가 없다면 작동하지 않을 것입니다.

:root {
    --spacer: 10;
}
.box {
    padding: var(--spacer)px; /* 작동하지 않음 */
    padding: calc(var(--spacer)*1px) 0; /* 작동함 */
}

See the Pen YQENzB by WITBLOG (@witblog) on CodePen.

(2) 키워드

CSS 커스텀 속성은 일반적인 CSS 속성과 같은 규칙을 가지고 있기때문에, inherit, initial, unset, revert와 같은 일반적인 CSS 키워드를 지정할 수 있습니다.

• inherit
  • 부모 요소의 값을 적용한다.
•  initial
  • CSS 스펙에 정의된 초기값을 적용한다. (CSS 커스텀 속성의 일부 경우, 초기값이 빈 값이거나 없다.)
•  unset
  • 속성이 상속되었으면 커스텀 속성의 경우처럼 상속된 값을 적용하고, 속성이 상속되지 않았으면 초기값을 적용한다.
•  revert
  • 속성을 user agent’s style sheet에 의해 초기값으로 리셋한다.(CSS 커스텀 속성의 경우, 초기값은 빈 값이다.)

.common-values {
  --border: inherit;
  --bgcolor: initial;
  --padding: unset;
  --animation: revert;
}

요소에 모든 스타일을 리셋하기 위해서는 all 키워드를 사용할 수 있습니다.

.my-component{
  all: initial;
}

안타깝게도, all 키워드는 커스텀 속성은 리셋하지 못하며 모든 CSS 커스텀 속성을 리셋하는 — 접두사를 추가할지에 대한 논의가 진행되고 있습니다. 미래에는 다음과 같이 전체 리셋이 가능할지도 모릅니다.

.my-component{
  --: initial; /* 모든 CSS 커스텀 속성 리셋 */
  all: initial; /* 모든 CSS 스타일 리셋 */
}

window.globalVar = 10;
function enclosing() {
    var enclosingVar = 20;
    function closure() {
        var closureVar = 30;
        return globalVar + enclosingVar + closingVar;
    }
    return closure();
}
console.log(enclosing()); // 60

아래는 CSS 커스텀 속성을 사용한 경우입니다.

See the Pen BZmRLv by WITBLOG (@witblog) on CodePen.

See the Pen vZWmXR by WITBLOG (@witblog) on CodePen.

 
위의 예에서 두번째 div는 default 외에도 highlighted 클래스를 가지고 있기 때문에 –highlighted-size와 –default-size 커스텀 속성 모두 선언된 상태입니다. 따라서 font-size는 –highlighted-size인 30px이 적용됩니다.
CSS 커스텀 속성은 DOM 구조를 이해하며, 다른 CSS 속성과 같은 규칙을 따라 캐스케이딩할 수 있습니다.

브라우저 동작 원리: (참고: http://d2.naver.com/helloworld/59361)
렌더링 엔진은 HTML 문서를 파싱하고 ‘콘텐츠 트리’ 내부에서 태그를 DOM 노드로 변환합니다. 그 다음 외부 CSS 파일과 함께 포함된 스타일 요소도 파싱합니다. 스타일 정보와 HTML 표시 규칙은 ‘렌더트리’라고 부르는 또 다른 트리를 생성합니다.

이번에는 Sass를 사용해봅시다.

아래에서 사용된 ‘variable-exists’ 함수는 주어진 이름의 변수가 현재 범위 또는 지역 범위에 있는지 확인합니다.

See the Pen yXPbJL by WITBLOG (@witblog) on CodePen.

지역 변수는 범위 내에서만 사용 가능하기 때문에, default 클래스의 범위 내에서 highlighted-size 변수는 접근 불가하며, default-size 변수만 사용 가능합니다. 따라서 default highlighted 클래스를 가진 요소더라도  font-size는 default-size인 10px이 적용됩니다.
여기서 중요한 것은 전처리기는 컴파일 과정을 거치기 때문에 모든 계산과 처리가 동시에 일어난다는 것입니다. 그렇기 때문에 전처리기는 컴파일하기 이전의 코드 구조에 완전히 의존하고, DOM의 구조는 전혀 알지 못합니다.

컴파일 과정:
CSS 전처리기는 코드를 작성한 뒤, CSS 문법으로 컴파일 해주는 방식을 취합니다.

이것이 전처리기와 CSS 커스텀 속성의 두번째 차이입니다. CSS 커스텀 속성은 DOM 구조를 인식하고, 동적이기 때문에 변수 스코프 지정시 이점을 가집니다.

6. 자바스크립트와 함께 사용하기

이전에 CSS에서 자바스크립트로 데이터를 보내기위해서는 CSS 출력에서 JSON을 통해 CSS 값을 작성한 후, 자바스크립트에서 읽어야 했습니다.
이제는 .getPropertyValue() 와 .setProperty() 메소드를 사용하여 자바스크립트에서 CSS 커스텀 속성을 읽고 쓸 수 있습니다.
아래는 CSS 커스텀 속성을 읽어오고, 내보내는 메서드입니다.

See the Pen eReWEz by WITBLOG (@witblog) on CodePen.

이처럼 box-shadow의 전체 값을 다시 입력하는 대신, 원하는 부분만 대체할 수 있습니다.

.btn {
  --shadow-color: #777;
  --color: #fff;
  text-shadow: 1px 1px 3px var(--shadow-color);
  box-shadow: 0px 1px 3px var(--shadow-color);
  color: var(--color);
}

body.inverted .btn{
  --shadow-color: #888;
  --color: #000;
}

See the Pen VbqBeP by Kong Jeongmin (@hihelloho) on CodePen.

:root {
    --gutter: 1rem;
    @media (min-width: 40em) {
        --gutter: 1.5rem;
    }
    @media (min-width: 70em) {
        --gutter: 2rem;
    }
}
div {
    padding: var(--gutter);
}
h2 {
    margin-bottom: var(--gutter);
}

div {
    padding: 1rem;
}
h2 {
    margin-bottom: 1rem;
}
@media (min-width: 40em) {
    div {
        padding: 1.5rem;
    }
    h2 {
        margin-bottom: 1.5rem;
    }
}
@media (min-width: 70em) {
    div {
        padding: 2rem;
    }
    h2 {
        margin-bottom: 2rem;
    }
}

@supports ((--a: 0)) {
  /* 지원하는 경우 */
}
@supports (not (--a: 0)) {
  /* 지원하지 않는 경우 */
}

const isSupported = window.CSS && window.CSS.supports && window.CSS.supports('--a', 0);
if (isSupported) {
  /* 지원하는 경우 */
} else {
  /* 지원하지 않는 경우 */
}

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