Code Metaphor

요즘 전에 언급했던 Haml을 사용해서 웹 개발을 해보고 있다. Haml과 함께 사용되는 Sass라는 것이 있는데, 일종의 CSS 전처리기라고 생각하면 좋을 듯하다. 문법은 CSS와 비슷하면서도 다소 다르다. 기존 CSS 문법의 초집합(superset)이었으면 좋았겠지만, 그렇지는 않다. 그래도 Sass에는 그런 불만을 잠재울 수 있는 좋은 점이 있다. 바로 중복 제거.

실무에서 CSS를 사용하면 흔히 나타날 수 있는 패턴인데, 긴 셀렉터 안쪽의 특정 부분만 다른 여러 셀렉터에 대해 같은 스타일을 선언하는 것이다.

#very.long select.or .a,
#very.long select.or .b,
#very.long select.or .c,
#very.long select.or2 .a,
#very.long select.or2 .b,
#very.long select.or2 .c {
    font-weight: bolder;
}

이게 뭐야! 라고 할 수도 있겠지만, 저런 경우가 있다. 물론 타협하는 자세로 or과 or2 클래스를 or-1-2로 묶고, a, b, c 클래스 따위를 a-b-c라는 형태로 묶어서 대충

#very.long select.or-1-2 .a-b-c { font-weight: bolder; }

와 같이 쓸 수도 있겠지만, 의미적으로 저렇게 정규화하기 곤란할 때도 많다. 그런 의미적으로 무관한 경우들을 하나의 클래스로 뭉뚱그릴 경우, 나중에 디자인이 몇 번 바뀐 뒤에도 마크업에 a-b-c와 같은 클래스가 남아있는 것을 보고도 이게 왜 필요한지 기억나질 않아 혼란스럽기 쉽다. 그렇다면 이를 쉽게 해줄만한 CSS 셀렉터 문법은 없을까?

#very.long (select.or, select.or2) (.a, .b, .c) { font-weight: bolder; }

위와 같이 쓸 수 있다면 정말 좋겠지만, CSS에는 저런 문법이 없다. 앞으로 추가될지는 모르겠다. 어쨌든 Sass에서는 원하는 것을 아래와 같이 쓸 수 있다.

#very.long
  select.or, select.or2
    .a, .b, .c
      :font-weight bolder

만약 Internet Explorer에서만 최적화가 필요할 경우, 아래와 같이 쓸 수도 있다.

#very.long
  select.or, select.or2
    .a, .b, .c
      :font-weight bolder
      * html &, *+html &
        :font-weight normal

&는 위쪽에 쓰인 셀렉터로 치환된다고 보면 된다. 물론 위와 같은 Sass 코드는 현존하는 모든 현대적인 브라우저들에서 렌더링될 수 있는 CSS 2 코드로 변환된다.

#very.long select.or .a,
#very.long select.or .b,
#very.long select.or .c,
#very.long select.or2 .a,
#very.long select.or2 .b,
#very.long select.or2 .c { font-weight: bolder; }
* html #very.long select.or .a,
* html #very.long select.or .b,
* html #very.long select.or .c,
* html #very.long select.or2 .a,
* html #very.long select.or2 .b,
* html #very.long select.or2 .c,
*+html #very.long select.or .a,
*+html #very.long select.or .b,
*+html #very.long select.or .c,
*+html #very.long select.or2 .a,
*+html #very.long select.or2 .b,
*+html #very.long select.or2 .c { font-weight: normal; }

아쉽게도 Sass는 현재 Ruby 구현밖에 존재하지 않는 듯하다. 기회가 있으면 Python으로 포팅해볼 생각이지만, 그게 언제 될지는;

덧. Sass에는 위 기능보다 더 강력한 것들이 많다. 상수(constant)라던가 믹싱(mixin) 같은 것들.