프론트엔드-코드/CSS

css 변수

sdafdq 2023. 8. 16. 14:58
:root{
  --fontBaseColor: #222;
  --bgBaseColor:#fff;
  --mainBaseColor: orange;
  --subBaseColor : red;
  --fontResetColor: #fff;
  --borderBaseStyle:'1px solid #808080'
  --baseFontsize:"14px";
}

root 가상클래스 만들어서

거기 안에 key:value를 쓴다.

root가 변수용 가상클래스 인듯.

 

사용은 var(--bgBaseColor) 이렇게. 

 

보통 color_variable.css 등으로 파일을 나눠서.

@import url('./Color_variable.css');

이런 식으로 임포트 해서 사용한다.

'프론트엔드-코드 > CSS' 카테고리의 다른 글

@media screen and (min-width:768px), @media screen and (max-width:767px)  (0) 2023.08.17
마진 병합  (0) 2023.08.17
Flex 정리  (0) 2023.08.16
Flex 자식들  (0) 2023.08.16
Flex  (0) 2023.08.16