CSS Variable Syntax

CSS 사용자 정의 속성

-- 접두사를 붙여 사용자 정의 속성 선언 후, var() 안에 사용자 정의 속성을 넣어 사용한다.

:root {
	--first-color: #16f;
	--second-color: #ff7;
}
#firstParagraph {
	background-color: var(--first-color);
	color: var(--second-color);
}

CSS 스펙은 사용자 정의 속성 선언에서 거의 모든 문자열을 사용하는 것을 허용한다.

CSS 속성에 대해 의미가 없을 수 있지만 JavaScript에서 액세스 할 수 있다.

:root {
	--flex-theme: {
		border: 1px solid var(--theme-dark-blue);
		font-family: var(--theme-font-family);
		padding: var(--theme-wide-padding);
		background-color: var(--theme-light-blue);
  };
}

element.style.getPropertyValue('--theme-dark-blue');

 

SCSS 사용자 정의 속성

일반 CSS와 최대한의 호환성을 제공하기 위해 최신 버전의 Sass에서는 사용자 정의 속성 값을 보간 내에 작성해야 한다.

보간은 최신 이전 Sass 버전에서도 작동하므로 모든 스타일시트에 권장된다.

/* SCSS */
$accent-color: #fbbc04;
:root {
	// 최신 버전의 Sass에서 적용되지 않음
	--accent-color-wrong: $accent-color;

	// 모든 버전의 Sass에서 적용됨.
	--accent-color-right: #{$accent-color};
}


/* Compiled CSS */
:root {
	--accent-color-wrong: $accent-color;
	--accent-color-right: #fbbc04;
}

 

 

📌 꼭 읽어주세요!

https://sass-lang.com/documentation/breaking-changes/css-vars

Sass: Breaking Change: CSS Variable Syntax

https://developer.mozilla.org/en-US/docs/Web/CSS/--* 

Custom properties (--*): CSS variables - CSS: Cascading Style Sheets | MDN

https://developer.mozilla.org/ko/docs/Web/CSS/Using_CSS_custom_properties

사용자 지정 CSS 속성 사용하기 (변수) - CSS: Cascading Style Sheets | MDN