css 변수(css 사용자 속성)

 

전처리기가 아닌 css에서도 변수로 지정하여 사용가능하다.

.ex{
    --color:black;
    color:white;
}

 

 

• 사용자 속성은 --로 시작해야 하며 --color 은 우리가 새로이 지정한 속성이며 , color은 기존 내장 속성

 

사용시 var()로 감싸서 사용하면 된다

 

.ex2{
	--white:white;
    background:var(--white);
}

 

위와 같이 사용가능하다.

 

 

• 두번째 인자로 기본값을 넣어줄수있다. 확실치 않은 경우 활용 가능

 

.ex3{
	color:var(--white,white);
}

 

 

다만 상위에서 하위로 상속이 되므로 상위에서 정의해야 하위에서 가능하다!!

 

* 전역변수처럼 일관적으로 사용하기 위해 많이 사용!!

 

* IE에서는 지원이 안된다

 

참고.

https://www.daleseo.com/css-variables/

CSS 변수 (CSS 사용자 속성)

https://velog.io/@yujuck/%EC%82%AC%EC%9A%A9%EC%9E%90-%EC%A7%80%EC%A0%95-CSS-%EC%86%8D%EC%84%B1

사용자 지정 CSS 속성