아마 많이 아시겠지만 그래도 도움이 되는 분들도 있을 듯하여 저의 경험을 공유합니다.

 

1. 사이트 내에 2가지(혹은 그 이상) 색상을 사용하여 css 작업을 할 때 일일이 색상코드를 다는 것이 번거롭고, 또한 경우에 따라서 색상을 변경할 경우 또 다시 번거로운 작업을 해야 할 때, :root로 색상값을 변수로 저장하여 사용합니다.

 

2. color_set.css(파일명을 달라도 됨)을 만들고 내용에 다음과 같이 색상값을 변수로 저장합니다.

그리고 이 파일을 common/css 폴더에 저장합니다.

-----------------------------

:root{
    --main_light: #c9f0a4;
    --main: #a4cf5a;
    --main_dark: #85af4b;
 

    --sub_light: #a6cef0;
    --sub: #60a3d9;
    --sub_dark: #5f77ba;
}

-------------------------------

 

3. 레이아웃 편집에서 다음과 같은 코딩을 추가합니다.

layout.html 편집에서
<!--// CSS --> 첫번째(!!) 줄에 다음 내용을 추가
<load target="../../common/css/color_set.css" />

 

4. 이후 layout.css 등 사용하는 css 파일에서 색상을 지정할 때

background-color:var(--main);

color:var(--main_dark);

등과 같이 변수를 사용합니다.

 

5. 이후 작업 과정에서 색상을 변경해야 하면

color_set.css 만 수정하면 한꺼번에 색상을 조정할 수가 있습니다.

  • profile

    CSS에 변수 기능이 생겨서 예전보다는 나아지긴 했지만, 오래 전부터 있던 SCSS에 비해 아직도 심하게 원시적인 언어로 느껴집니다. JS와 달리 발전이 왜 이렇게 느린 건지...

     

    SCSS는 변수뿐 아니라 PHP처럼 자유로운 인클루드, 함수와 믹스인을 활용한 코드 간소화 등 모든 면에서 순정 CSS보다 편리한데다가, CSS에 새로 추가된 속성은 SCSS에서도 자동으로 지원하고, 무엇보다도 코어에서 CSS로 자동 변환해주기 때문에 브라우저 호환성도 더 좋지요. 이거 한 번 써보면 절대 순정 CSS로 못 돌아갑니다.

  • profile profile
    그렇군요. 감사합니다
  • ?
    좋은 팁이에요.. ^^