@at-rule - @property - css 변수를 효율적으로 관리

CSS - Advanced

@at-rule - @property - css 변수를 효율적으로 관리

ejey 2024. 6. 8. 21:21

@property를 사용하면 css변수를 조금 더
효율적으로 관리 할 수 있습니다.

1. css 변수 선언 기본방법

:root { 
	--primary : tomato;
}

h1 {
	color : var(--primary)
}

이슈 : 변수의 값을 혹시 컬러가 아닌 다른값이 들어가게 되면 아예 컬러가 적용되지 않습니다.

2. @property 사용시

@property --primary {
	syntax : '<color>';
    initial-value : tomato ;
    inherites : false;
}

h1 {
	color : var(--primary) // tomato;
}

h1:hover {
	--primary : olive;
}

h1:nth-child(2):hover {
	--primary : gold;
}

변수의 기본 값을 지정하고, syntax로 타입을 적어주었기 때문에, 변수의 값이 data type과 맞지않으면, 기본값으로 지정되게 되어 css가 아예 안나오는 걸 방지 할 수있습니다.

< syntax 속성 종류 >

syntax 종류	사용 예
color	@property --var { syntax : '<color>'; initial-value : red; inherites : false; }
percentage	@property --var { syntax : '<percentage>'; initial-value : 30%; inherites : false; }
url	@property --var { syntax : '<url>'; initial-value : url('./images/a.png'); inherites : false; }
transform-function	@property --var { syntax : 'transform-function'; initial-value : translateX(20px); inherites : false; }