시작하기

역사
- 2009년 Alexis Sellier가 만들었으며 Ruby로 처음 작성되었고 그 이후에 javaScript로 대체되었습니다.
지원하는 언어
- LESS는 아래의 프로그래밍언어에 사용할 수 있으며, 각 언어들마다 다양한 Open Source 프로젝트로서 LESS를 지원하고 있습니다.
- 참고 ( http://lesscss.org/about/#ports )
  1. Java
  2. .Net
  3. PHP
  4. Python
  5. Ruby
  6. Go
그래서 LESS는
- Open Source
- CSS로 컴파일되고 클라이언트 혹은 서버에 실행될 수 있는 동적 스타일 시트 언어입니다.
- 브라우저가 LESS.js를 통해 실시간 컴파일

LESS 설치

설치 전 준비
- NPM을 이해하고 설치해야 합니다.

설치하기

다음의 명령을 이용하여 시스템 전역으로 설치하거나

npm install less -g

프로젝트에서만 사용할 수 있도록 설치할 수 있습니다.

npm i less --save-dev

사용하기

설치가 끝나고 바로 HTML 혹은 CSS에서 LESS(*.less)로 작성된 파일을 읽어서 사용할 수 있을까요? 그렇지 않습니다.
LESS로 작성된 파일은 css로 변환하는 과정이 필요합니다.
이 문서에서는 node에서 설치된 less 도구로 변환하는 방법을 소개합니다.

less로 작성된 코드가 있는 곳으로 이동하여 Terminal 에서 명령어를 아래와 같이 입력합니다. lessc 라는 컴파일러를 사용합니다.

예 (style.less)

lessc style.less > style.css
결과 (style.css)

이렇게 생성된 css를 프로젝트에서 불러오기하여 사용할 수 있습니다.

주의사항

작성된 less 코드에서 변수 선언 시 공백을 주의하세요.

위의 방법외에 직접 less(*.less)를 파일(웹 페이지를 의미)에서 직접 불러오고 사용할 수 있으나, 별도의 less.js 파일이 필요하며, 성능이 느린 단점이 있어 권장하지 않습니다. 따라서 관련된 정보는 이 문서에서는 안내하지 않습니다.

예

<link rel="stylesheet/less" type="text/css" href="style.less> <script src="less-1.3.1.min.js" type="text/javascript"></script>

우리가 LESS로 할 수 있는 것 (+특징)

코드 작성

LESS는 변수를 정의할 수 있으며 변수의 정의는 (@)로 변수의 할당은 (;)로 수행됩니다.

LESS는 변환이 되는 동안 CSS문서로 출력이 됩니다.

변수를 정의하고 할당할 수 있다는 것은 그 역할을 재사용할 수 있다는 뜻이 될 수 있습니다.

변수 혹은 코드의 재사용은 LESS의 큰 장점 중 하나입니다. (-기본 코드 참고)

기본 코드

@pale-green-color :  #4D926F ;

#header  { 
  color :  @pale-green-color ; 
} 
h2  { 
  color :  @pale-green-color ; 
}

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

MixIn

MixIn(믹스인)이라고 명명하고 있는 이 것은 마치 정의된 클래스를 Function과 같이 사용할 수 있음을 의미합니다.

예:

.mixin() {
  @width:  100%;
  @height: 200px;
}
 
.caller {
  .mixin();
  width:  @width;
  height: @height;
}
.rounded-corners  ( @radius :  5px  10px  8px  2px )  {
  -webkit- border-radius :  @radius ;
  -moz- border-radius :  @radius ;
  border-radius :  @radius ;
}
 
#header  {
  .rounded-corners;
}
#footer  {
  .rounded-corners (10px  25px  35px  0px) ;
}

결과:

.caller {
  width: 100%;
  height: 200px;
}
#header {
  -webkit-border-radius: 5px 10px 8px 2px;
  -moz-border-radius: 5px 10px 8px 2px;
  border-radius: 5px 10px 8px 2px;
}
#footer {
  -webkit-border-radius: 10px 25px 35px 0px;
  -moz-border-radius: 10px 25px 35px 0px;
  border-radius: 10px 25px 35px 0px;
}

따라서 위와 같이 정의된 변수를 function처럼 사용할 수 있고 function에서 가져온 변수를 현재의 영역에 대입할 수 있습니다. (재사용할 수 있죠)

단순히 값만 지정할 수 있는 것이 아니며, 계산식을 대입하여 사용할 수도 있습니다.

예:

.average(@x, @y) {
  @average: ((@x + @y) / 2);
}

div {
  .average(16px, 50px); // "call" the mixin
  padding: @average;    // use its "return" value
}

결과:

div { padding: 33px; }
중요한 부분 중 한가지는 호출자 범위 내에서 지정된 변수는 외부의 전역변수보다 우선시 됩니다. (이전의 CSS와 동일한 수준)

연산

위의 Mix In 예제에서도 나왔지만 연산기능이 있습니다.

예

.sum(@a, @b) {
  @summary: @a + @b;
}
div {
  .summer {
    .sum(5, 5);
    left: @summary;
  }
}

결과:

div.summer { left: 10; }

중첩

CSS의 관계식보다 보다 편리하게 표현 및 이해할 수 있습니다.

CSS의 경우 div 하위의 모든 <button />과 <a /> Element를 포현할 경우

예

div > button {
  ...
}
div > a {
  ...
}

LESS의 경우 보다 쉽게 표현할 수 있습니다.

예

div {
  button {
    font-size: 10px;
    color: blue;
  }
  a {
    size: 5px;
  }
}

Mixin Guards

앞서 언급한 Mixin 기능에서 한걸음 더 나아간 기능이며, 조건식을 포함할 수 있습니다.

예를 들어 어떤 Element의 배경색이 50%이하일 때 특정 클래스의 값을 변경하는 등의 조건으로 javascript를 이용하지 않더라도 LESS 내에서 처리할 수 있습니다.

예 (정의하기)

.mixin (@a) when (lightness(@a) >= 50%) { // lightness가 50% 이상일 때
  background-color: black;  // 배경색을 black으로 지정하고
}
.mixin (@a) when (lightness(@a) < 50%) { // lightness가 50% 이하일 때 
  background-color: white; // 배경색을 white로 지정해라
}
.mixin (@a) {
  color: @a;
}

예(사용하기)

.class1 { .mixin(#ddd) }
.class2 { .mixin(#555) }

결과 (CSS로 컴파일)

.class1 {
  background-color: black;
  color: #ddd;
}
.class2 {
  background-color: white;
  color: #555;
}

사용할 수 있는 연산자

>, >=, =, =<, <, true
이외에는 모두 false 입니다.

이외 상세한 내용은 여기에서 확인할 수 있습니다.

http://lesscss.org/features/#mixin-guards-feature

반복문(loop)

반복문을 사용하여 클래스(들)를 생성할 수 있습니다. 좋은 예제로 테이블의 컬럼 수에 따라 컬럼별 색상을 다르게 주거나 혹은 row의 색상을 다르게 줄 수 있습니다.

예

.generate-columns(4);

.generate-columns(@n, @i: 1) when (@i =< @n) {
  .column-@{i} {
    width: (@i * 100% / @n);
  }
  .generate-columns(@n, (@i + 1));
}

결과

.column-1 {
  width: 25%;
}
.column-2 {
  width: 50%;
}
.column-3 {
  width: 75%;
}
.column-4 {
  width: 100%;
}

상위 셀렉터

& 를 이용하여 상위 셀렉터를 묵시적 지정할 수 있습니다.

예

a {
  color: blue;
  &:hover {
    color: green;
  }
}


.button {
  &-ok {
    background-image: url("ok.png");
  }
  &-cancel {
    background-image: url("cancel.png");
  }

  &-custom {
    background-image: url("custom.png");
  }
}

결과

a {
  color: blue;
}

a:hover {
  color: green;
}


.button-ok {
  background-image: url("ok.png");
}
.button-cancel {
  background-image: url("cancel.png");
}
.button-custom {
  background-image: url("custom.png");
}

& 는 모든 부모를 나타냅니다. 즉 바로 위의 부모 셀렉터만 의미하는 것이 아닌 나열된 모든 부모 셀렉터를 의미합니다.

예

.grand {
  .parent {
    & > & {
      color: red;
    }

    & & {
      color: green;
    }

    && {
      color: blue;
    }

    &, &ish {
      color: cyan;
    }
  }
}

결과

.grand .parent > .grand .parent {
  color: red;
}
.grand .parent .grand .parent {
  color: green;
}
.grand .parent.grand .parent {
  color: blue;
}
.grand .parent,
.grand .parentish {
  color: cyan;
}

위의 예제에서 &가 1개 표현될 때 상위의 모든 부모들이 나열되는 것을 확인할 수 있습니다.
이외의 Selecoor의 순서를 변경하는 방법은 이곳을 참고하세요 ( http://lesscss.org/features/#parent-selectors-feature )

Functions

LESS에서 제공하는 다양한 Function에 대한 설명입니다.
아래의 사이트에서 제공하는 Function을 확인하고 사용할 수 있습니다.
Misc, String, List, Math, Type, Color의 카테고리에 관련된 Function들이 준비되어 있습니다.

http://lesscss.org/functions/

저작자표시 비영리 변경금지

Web Develop Engineer - minam.cho

about {LESS} CSS