Dynamic Stylesheet Framework

-- CSS

어린왕자악꿍 2017. 3. 23. 14:42

CSS는 HTML마크업을 꾸며주는 언어이다.

CSS를 직접 작성하는 개발자가 많아지면서 (특히 필자의 경우) 개발자 입장에서 비효율적인 면이 나타났다.

개발언어에 비해 그저 문법 나열로만 이루어진 CSS는 그 양이 방대해진다.

그리하여 수정이 필요한 경우, 상당한 양의 중복된 곳을 수정해야하는 유지보수의 어려움이 발생한다.

이런 부분을 개발자 입장에서 생각하여 CSS를 만들 수 없을까 고민하여 검색한 결과,

LESS와 SASS 라는 다이나믹 스타일시트 프로엠워크를 알게 되었다.

참조한 사이트들에서 각각의 특징을 보니 매력적으로 다가온 것은 변수를 쓸 수 있다는 것이다.

즉, 색상 #336699로 써야하는 곳이 있었다면 이를 수정하려면 일일히 맞는 곳을 찾아서 고쳤었다.

왜냐하면 #336699로 쓴 다른 곳은 유지해야 하는 곳일 수도 있어 전체 바꾸기가 불가 하기 때문이다.

그런데, LESS로 예를 들면 (LESS가 맘에 든다)

@color1: #336699;

@color2: @color1 + #111;

#header { color: @color2; }

와 같이 사용이 가능하여 색상을 변경한 후에 컴파일하여 CSS를 만들면 쉽게 적용할 수 있다.

이글은 소개를 위한 목적이니 자세한 문법이나 특징은 아래 참조한 사이트를 확인하기 바란다.