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

 

 

 

@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;  }

 

 

 

3. 아래에서 실제로 연습해 보세요

 

See the Pen Untitled by Jey Lee (@Jey-Lee-the-sasster) on CodePen.

 

 

 

 

4. 브라우저 지원현황

2024.06 기준

 

https://caniuse.com/?search=%40property

"@property" | Can I use... Support tables for HTML5, CSS3, etc

 

 

자, 어렵지 않아요~ 우리 영혼 챙겨가며 계속 공부해봅시다잉~~~!

 

 

본 문서는 제가 오랫동안 일해왔던 내용을 강의와 책편집을 위해 정리해둔 내용입니다.

힘들게 만든 만큼 공부하시는 분들께 도움이 되면 좋겠습니다.

제 피드를 공유하거나 링크를 해주시는것은 감사합니다~

 

 

 

본 블로그에 사용된 기본 스티커 외의 이미지들 또한 직접 제작한 것들입니다.

하여 출처없이 이미지나 내용만을 카피해서
포스트를 쓰신다거나 하는것은 하지말아주세요 ^^

감사합니다.