[CSS] CSS 변수

CSS 변수 

 
CSS 변수를 사용하면 스타일링을 일정하게 할 수 있고, 한 곳에서만 수정하면 페이지 전체가 한 번에 변경 가능하다. 변수를 미리 정의해서 사용하면 코드의 가독성과 유지보수성을 높이고, 편리하고 효율적으로 CSS를 작성할 수 있다.

또 유용한 점은 반응형을 만들 때 :root를 미디어 쿼리에 복사해서 가져와 값만 변경하면, 반응형일 때 사용되는 값이 한 번에 변경된다.

만약 코드가 길어지고, 프로젝트의 규모가 클 때 CSS 변수를 사용하지 않았을 경우 어떻게 될까?
 
 

코드 전체를 왔다갔다 하면서 요소를 찾으며 하나하나 수정해야 하는 번거로움이 따른다... 유지보수성이 현저히 떨어진다.
 

그러므로 반복적으로 사용되는 값은 한 곳에서 미리 정의해서 사용하여 가독성도 높이고, 유지보수성도 높이는 코드를 작성하자!

 

:root {
    /* Color */
    --white-color: #ffffff;
    --black-color: #0f0f0f0f;
    --blue-color: #0b66dd;
    --red-color: #ff1717;
    --greay-dark-color: #909090;
    --grey-light-color: #e0e0e0e0;
    --background-color: #black;
    

    /* Size */
    --side-padding: 12px;
    --avarta-size: 36px;

    /* Font Size */
    --font-large: 18px;
    --font-medium: 14px;
    --font-small: 12px;
    --font-micro: 10px;
}

 
 

📌 var() 를 이용해서 변수를 사용하면 된다.

.section {
	background-color: var(--background-color);
    	color: var(--black-color);
}

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

Using CSS custom properties (variables) - CSS: Cascading Style Sheets | MDN