[CSS] @property로 CSS 변수의 구체적 스펙 정의하기

🔺 우리는 —-variable로 CSS 변수를 만들어 재사용성을 높일 수 있다.
그리고 —-variable에 필요로 따라 다른 값을 할당할 수 있는데, 이때 잘못된 타입의 값을 할당한 경우 예상치 못한 문제가 발생할 수 있다 😟
이번 시간에는 변수의 잘못된 사용을 막을 수 있는 방법 중 하나인, @property에 대해 알아보았다!

1. CSS 변수 사용시 발생하는 실수

💡 우선, CSS 변수를 어떻게 선언하고 재할당하는 지 살펴보자.

• 우리는 반복 사용되는 CSS 스타일을 :root에 —-variable형태로 선언할 수 있다.
• 한 예시로, orange를 초기값으로 가지는 색상 변수(—-primary)를 만들어보았다.

:root {
  --primary: orange;
}

• 이렇게 만든 CSS 변수로 글자 색상을 지정할 수 있다.

.text {
  color: var(--primary);
}

See the Pen css variables by KumJungMin (@kumjungmin) on CodePen.

• 그리고 필요에 따라 CSS 변수에 다른 값을 할당할 수 있다.
• 아래 예시는 --primary를 blue로 수정한 모습이다.

.text {
  --primary: blue;
  color: var(--primary);
}

See the Pen override css variables by KumJungMin (@kumjungmin) on CodePen.

🔺 엥? 그런데 어떤 부분에서 실수가 나온다는 걸까?
그건 바로! CSS 변수에 타입에 맞지 않는 값을 할당한 경우 문제가 발생한다! 😢

• 만약 우리가 --primary 변수에 색상이 아닌 숫자를 넣었다면???
• 타입에 맞지 않는 값을 넣었기 때문에 글자에 색상이 적용되지 않는다ㅜ

See the Pen css variable error by KumJungMin (@kumjungmin) on CodePen.

• 그럼 어떻게 하면 변수의 잘못된 사용을 막을 수 있을까?
• 바로 @property를 사용해 CSS 변수의 구체적인 스펙을 정의하면 된다.
• 이제 @property에 대해 알아보자 🙂

2. @property 사용법

(1) @property이란?

• @property는 CSS 변수의 초기값, 유형(보러가기), 상속 여부를 선언할 수 있다.

@property --x {
 syntax: '<유형>';
 initial-value: 초기값;
 inherits: false;
}

• @property 변수를 선언할 때는 초기값은 필수이다.
• 만약 @property 변수에 할당된 값이 변수 타입과 다르면 초기값을 반환한다.
• inherits은 상속 유무로, true로 설정하면 해당 변수가 DOM트리에 상속된다.

(2) CSS 변수 선언해보기

• @property를 사용해 orange를 기본값으로 가지는 색상 변수(--primary)를 선언해보았다.

See the Pen @property example by KumJungMin (@kumjungmin) on CodePen.

• 단, @property 변수에 할당한 값이 타입에 맞지 않으면 초기값을 반환한다.

See the Pen css property prevent misuse by KumJungMin (@kumjungmin) on CodePen.

3. (덧) JS로 CSS 변수 컨트롤하는 방법

(1) CSS 변수를 선언하는, registerProperty()

• CSS에서 @property를 사용해 변수를 선언할 수도 있지만,
• JS에서 registerProperty()를 사용해 CSS 변수를 선언할 수 있다.
• 형태는 @property와 유사한데, 변수명, 유형, 초기값, 상속여부를 지정해주면 된다.

window.CSS.registerProperty({
  name: '--primary',       // 변수명
  syntax: '<color>',       // 변수값 유형
  initialValue: 'orange',  // 초기갑 
  inherits: true,          // 상속여부
});

See the Pen registerProperty로 CSS 변수 추가 by KumJungMin (@kumjungmin) on CodePen.

(2) CSS 변수 초기값 변경하는, setProperty()

• setProperty()로 CSS 변수의 초기값을 변경할 수 있다.

document.documentElement.style.setProperty("--primary", "pink");

See the Pen setProperty-1 by KumJungMin (@kumjungmin) on CodePen.

• 이때, CSS 변수의 상속 여부(inherits)가 true여야만 CSS 변수의 초기값을 변경할 수 있다.
• 아래 예시와 같이 CSS 변수의 상속 여부를 false로 지정하면, 초기값 변경이 불가하다.

See the Pen setProperty-2 by KumJungMin (@kumjungmin) on CodePen.

(3) CSS 변수에 접근할 수 있는, getPropertyValue()

• getPropertyValue()를 사용하여 CSS 변수값에 접근할 수 있다.

const root =  getComputedStyle(document.documentElement);
root.getPropertyValue("--variable");

• 아래 예시는 getPropertyValue()로 --primary-secondary 변수값에 접근한 모습이다.

See the Pen getPropertyValue example by KumJungMin (@kumjungmin) on CodePen.

💡 이번 시간에는 CSS 변수의 유형과 초기값, 상속여부를 설정하는 @property에 대해 알아보았다.
@property는 CSS 변수의 구체적인 스펙을 정의할 수 있었으며,
만약 변수 타입에 맞지 않는 값을 할당한 경우 초기값을 반환하여 잘못된 사용을 막을 수 있었다.
이러한 CSS 변수는 CSS 뿐만 아니라 JS에서 registerProperty()를 사용해 구체적인 스펙을 설정할 수 있었다.