Use of the var() function in CSS

css var()

var() 함수로 css를 변수화 할수있다


1.글로벌 변수

//선언

:root{ 
   -- Variable name: css content;
}

// 사용

div{
   background-color:var(--변수명);
}


2.로컬변수

// 선언

h2{   
   -- Variable name: css content
}

// 사용

h2{
   background-color:var(--변수명);
}


3.재정의 (오버라이딩)

:root{    
   --main: #146af0; 
} 
h1{ 
   color: var(--main); 
} 
h2{ 
   --sub: #ff0011; 
   --main: #00ff11; /* Override by local variable */ 
   color: var(--sub);
   border-bottom: 2px solid var(--main); /* Use local variables */ 
}



참조

참조사이트

주로 참조한 페이지

Oct 9, 2023 Views 104