[2기 부산 이환승]The Dynamic Stylesheet Language - LESS

1. 시작하기 전에...

 처음부터 웹을 개발하는 개발자는 한번도 의구심이 들어본 적이 없을 것 같지만, 저처럼 다른 프로그래밍 언어를 접하고 웹을 개발해본 개발자라면 한번이라도 CSS에서 변수를 쓸 수 있으면 진짜 편할 것 같은데 라는 생각을 가져 보셨을 것입니다. 제가 오늘 소개해드릴 LESS는 Dynamic Stylesheet Language으로 제가 앞서 이야기드린 "CSS에 변수를 쓸 수를 있으면 좋지 않을 까?"라는 것을 뿐만 아니라 여러 기능을 제공하는 녀석입니다.

2. 사전지식 다지기

 LESS는 CSS를 먼저 알아야 되기때문에 CSS를 잠시 알고 넘어 가도록 하겠습니다.

CSS는 Cascading Style Sheets의 줄임말입니다. 그리고 CSS는 HTML의 Elements를 어떻게 보여줄 것인가를 정의하기 위해 생겨났습니다. HTML4.0에서 추가가 되었는데요. 아래의 부분을 보시죠.

<p>좋은 <font style="color:red">아침</font>입니다.</p>

 예전에는 아침에 빨간 글씨로 바꾸기 위해서 <font>태그를 이용해서 작성을 했습니다. 나중에 빨간 글씨를 파란 글씨로 바꾸어야 될 일이 생겼습니다. 그러다면.. color:blue로 바꾸면 되지만 이게 한 부분이 아니라 정말 많다면 일일이 다 곤쳐야 되는 불편함이 생겼죠.. 그야말로 노가다이죠. 이것을 CSS를 이용해서

<p>좋은 <span id="morning">아침</span>입니다.</p>

으로 HTML을 작성하고

CSS로 

#mornig{ color:red; }

작성을 하면 나중에 유지보수 시 쉽게 곤칠 수 있게 되었습니다.

컨탠츠와 꾸밈을 나누기 위해 생겨났다고 보시면 되겠습니다.

3. LESS 기능 살펴보기

 이제 LESS의 기능을 살펴보도록 하겠습니다.

첫번째로 Variables입니다.

@변수명: 값

위의 형식대로 변수를 선언 하시면 됩니다.

사용하실때는 @변수명 으로 사용하시면 됩니다.

// LESS
@main_width: 200px;

#main_div {
  width: @main_width;
}
#content_div {
  width: @main_width;
}

/* Compiled CSS */

#main_div {
  width: 200px;
}
#content_div {
  width: 200px;
}

위에 처럼 반복되는 부분에 변수를 이용을 하면 나중에 유지보수시 변수 값만 바꾸면 되겠죠.

두번째는 Mixins입니다.

이름처럼 한번 선언한 CSS를 이용하여 다른 부분에도 넣는 기능인데요.

// LESS
.rounded-corners (@radius: 5px) {
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
  -ms-border-radius: @radius;
  -o-border-radius: @radius;
  border-radius: @radius;
}

#header {
  .rounded-corners;
}
#footer {
  .rounded-corners(10px);
}

/* Compiled CSS */

#header {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
}
#footer {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
  border-radius: 10px;
}

 한번 선언한 것을 선언을 한 것을 재활용을 할 수 있는 기능입니다. 디폴트 파라미터처럼 사용할 수 있어 활용 범위가 커질 것 같습니다.

 세번째는 Nested Rules입니다. HTML은 구조적으로 이루어져있지만 CSS같은 경우 구조적이지 않고 id나 class를 찾아가거나 해당 되는 태그를 셀렉트해서 CSS속성을 넣어주게 되는데요. Nested Rules같은 경우 HTML과 유사하게 구조적으로 매칭하여 CSS속성을 부여 해줄 수 있습니다.

// LESS

#main {
  h1 {
    font-size: 20px;
    color: red;
  }
  p { font-size: 12px;
    a { text-decoration: none;
      &:hover { border-width: 1px }
    }
  }
}




/* Compiled CSS */

#main h1 {
  font-size: 20px;
  color: red;
}
#main p {
  font-size: 12px;
}
#main p a {
  text-decoration: none;
}
#main p a:hover {
  border-width: 1px;
}

 한번 선언한 것을 선언을 한 것을 재활용을 할 수 있는 기능입니다. 디폴트 파라미터처럼 사용할 수 있어 활용 범위가 커질 것 같습니다.

 네번째는 Function & Operations입니다.  CSS에서 연산이 불가능하기 때문에 이게 참 좋은 기능인것 같은데요 보통 연산이 된 값을 속성으로 넣고 싶을경우 javascript를 이용하여 속성을 부여해주거나 하는데 이럴 필요가 없어지지 않을까 싶네요.

 또한 변수도 이용해서 사칙연산을 이용하여 속성을 부여해줄 수 있습니다. 그리고 기본적으로 제공하는 함수들이 존재합니다. 색에 관련된 함수는 밝게,어둡게, 채도를 높이고 낮추고 페이드인 페이드 아웃, 색을 썩거나 레드채널의 값을 뽑아내거나 등등의 많은 함수들이 있고 Math함수에는 반올림,올림 등의 함수가 존재합니다.

// LESS

@the-border: 1px;
@base-color: #111;
@red:        #842210;

#header {
  color: (@base-color * 3);
  border-left: @the-border;
  border-right: (@the-border * 2);
}
#footer {
  color: (@base-color + #003300);
  border-color: desaturate(@red, 10%);
}

/* Compiled CSS */

#header {
  color: #333;
  border-left: 1px;
  border-right: 2px;
}
#footer {
  color: #114411;
  border-color: #7d2717;
}




4. LESS 사용해보기

 LESS는 Node.js의 npm안의 한 패키지로써 실제로 사용을 하게되면 서버에서 node.js서버로 요청을 하게되고  CSS로 컴파일 후 결과물을 주게되고 표현이 되는 형식입니다. less.js에서 요청을 하고 받는 로직이 다 들어 있는데요.

 그렇다면.. 가장 문제가 되는 것은 그럴 일은 잘 없겠지만 javascript를 사용 안함으로 해놓고 쓰는 유저가 있을 경우 결과물이 제대로 보이지 않는 단점이 있는데요. 그러하기 때문에 아직까지는 실무로 적용하기가 힘듭니다. 하지만 방법이 없는건 아닙니다. 컴파일이 된 css를 홈페이지에 삽입을 하면 되기 때문이죠.

 커맨드라인에서 컴파일을 해야되지만 이를 쉽게 하기위해 GUI로 만든 프로젝트도 다수 있습니다.

https://github.com/cloudhead/less.js/wiki/GUI-compilers-that-use-LESS.js

 위의 링크로 들어가시면 GUI로된 LESS를 컴파일을 할 수있는 프로그램이 존재합니다. LESS로 작업을 하고 웹에 배포할때는 CSS로 배포하는게 안정적이겠죠.

 그리고 http://lesstester.com/ 라는 웹 서비스로 제공되는 LESS 컴파일러가 존재해서 언제 어디서나 테스트가 가능해졌습니다.

5. 마치며

 이렇게 좋은 기능있는 LESS가 javascript를 이용해서 동작을 하기때문에 실제로 서비스하기에는 약간 무리가 아직은 있습니다.(물론 node.js서버를 사용하신다면 상관이 없지만 LESS를 쓰기 위해서 Node.js 서버를 쓰는 건 낭비가 아닐까요?) 제 생각에는 CSS를 클라이언트(웹브라우저)에서 해석하듯이 LESS가 표준으로 채택이 되서 많은 브라우저에서 LESS를 지원하게 되고 node.js서버 필요 없이 LESS확장자를 가지고 웹브라우저가 알아서  해석을 하게되는 시기가 언젠가는 오지 않을까? 라는 생각을 가질 만큼 매력적인 기능이 많은 녀석이 아닌가 싶습니다. 

출처  :

http://lesscss.org/

https://github.com/cloudhead/less.js/wiki/GUI-compilers-that-use-LESS.js

http://lesstester.com/