LESSCSS

LESS 언어에 대하여

lesscss란 무엇인가?

css는 html을 꾸며주는 언어입니다. 정보와 표현을 분리해주는 언어로 많은 장점을 가지고 있습니다. 하지만 단점도 있는데요. 이를테면 작성하기는 쉽지만, firebug와 같은 도구 없이는 유지보수하는 것이 매우 어렵습니다. 또 동적인 언어의 특징인 변수나 함수와 같은 특성을 가지고 있지 않기 때문에 많은 양의 코드가 동원되기도 합니다.

이런한 문제를 해결하기 위해서 기술 중의 하나가 lesscss입니다. lesscss를 보다 간결하고 유지보수하기 쉬운 css를 만들 수 있습니다.

lesscss와 유사한 기술로는 sass가 있습니다.

이 문서에 대해서

대상

  • html/css에 대한 기초적인 지식을 알고 있는 분들
  • css를 효율적으로 관리하고 싶은 분들

기존의 CSS를 lesscss로 변환하기

변수

변수를 사용하면, 이곳저곳에서 사용하는 값을 한 곳에 넣어둘 수 있습니다. 그리고 스타일 시트 전체에서 사용할 수 있죠. 그래서 무언가 고쳐야 할 때에, 변수 부분의 코드 한 줄만 바꾸면 되어서 작업이 편해집니다.

LESS

@color: #4D926F;

#header {
 color: @color;
}
h2 {
 color: @color;
}

컴파일한 CSS

#header {
 color: #4D926F;
}
h2 {
 color: #4D926F;
}

믹스인 (Mixins)

믹스인(Mixin)은 한 클래스 안에서 하나의 속성 이름으로 지정하는 방식을 통해 다른 클래스의 모든 속성들을 포함시킬 수 있게 해줍니다. 이것은 마치 변수들 같지만 사실은 클래스 전체를 의미합니다. 믹스인은 또한 함수처럼 변수도 받아들이기도 합니다. 아래의 예시를 보세요.

LESS

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

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

컴파일한 CSS

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

중첩 또는 포함에 관한 규칙

CSS 속성 상속을 위해 긴 선택자(selector)를 만드는 방법 대신, LESS에서는 한 선택자를 다른 선택자 안에 포함시킬 수 있습니다. 이를 통해 CSS 속성 상속을 훨씬 더 간결하게, 그리고 스타일 시트를 짧게 만들 수 있습니다.

#header {
 h1 {
   font-size: 26px;
   font-weight: bold;
 }
 p { font-size: 12px;
   a { text-decoration: none;
     &:hover { border-width: 1px }
   }
 }
}
#header h1 {
 font-size: 26px;
 font-weight: bold;
}
#header p {
 font-size: 12px;
}
#header p a {
 text-decoration: none;
}
#header p a:hover {
 border-width: 1px;
}

함수와 연산

스타일시트 안의 어떤 요소들이 다른 요소들에 대해 비례하나요? 연산 (operation)은 속성값과 색상값들을 더하고, 빼고, 곱하고 나누게 하는 것을 통해 속성들 사이의 복잡한 관계들을 정의할 수 있게 해줍니다. 함수는 자바스크립트 코드와 일대일 대응을 시켜 당신이 원하는 속성값들은 무엇이든지 생성해 낼 수 있게 합니다.

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%);
}

컴파일된 CSS

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

 

다른 언어로 보기

  • 러시아어: http://lesscss.ru
  • 중국어: http://lesscss.net
  • 일본어: http://less-ja.studiomohawk.com/
  • 벨라루스어: http://www.designcontest.com/show/lesscss-be

About

LESS는 Alexis Sellier가 개발했습니다. 그는 cloudhead라는 닉네임으로 좀 더 널리 알려져 있습니다.
powered by LESS
Copyright © Alexis Sellier 2010-2012

댓글

댓글 본문
  1. devjang
  2. 화아안
    감사합니다! ^^ CSS와 비교샷이 있어서 이해하기가 정말 좋아요!!
  3. 해앵인
    http://css2less.cc/ 사이트 없어졌네요ㅜㅜ 감사합니다!
  4. 잘 정리되어 있어서 도움 많이 됬어요~ 감사해요~
  5. 싸구찌
    오늘부터 Less 정복 할려고 합니다 ㅎ~~~ 응원해 주세요!!!
  6. bestheroz
    매우 큰 도움되었네요!! less!!!!?!
  7. irene
    메뉴에 less가 빠져 있네요. ㅠㅠ
  8. 별모모
    less, 선택이 아닌 필수 같습니다.
  9. 1111
    전 생활코딩 매니아에요.@
    정말 좋은정보 감사합니다.
  10. josephine0258
    좋은 정보네요.. 이런걸 미리 알았더라면 ㅠㅠ
    중복되는 많은 css 코드 때문에 고생했던 기억을 하니.. 눈물이 앞을 가리네요 ...ㅎㅎㅎ
    감사합니다~!
  11. Hoseong Hwang
    문법에 약간의 차이가 있지만, 대부분의 기능이 1:1 대응돼서 하나를 배우면 다른 하나는 별다른 어려움 없이 사용 가능하실 거에요
    대화보기
    • Jongchan Lee
      멋진 강좌입니다!
    • Sun Ju jin
      항상 강의 잘듣고 있습니다 ^^* 굼금한것이 있어 이렇게 글올려요 less와 sass 가 비슷한 것 같은데.. 어떤것이 상용화 되어있나요?? 어떤것을 공부하는 것이 좋을지... 차이점은 없는건가요??
    • JunYong Jeong
      notepad++라는 프로그램이에요
      http://notepad-plus-plus.org/
      대화보기
      • sooyeon
        첫번째 동영상에서 사용하고 계시는 notepad는 어느 프로그램인가요? 제가 처음부터 듣질 않아서.. 무엇인지 알려주시면 감사하겠습니다 ^^
      버전 관리
      egoing
      현재 버전
      선택 버전
      graphittie 자세히 보기