[CSS] Preprocessor - LESS 사용해 보기

참고 : http://i5on9i.blogspot.kr/2014/07/less.html

LESS 란

less 는 css 의 기능부족(?)을 충족시키기 위한 preprocessor 이다. wiki 에 따르면 다른 프로그램의 input 으로 사용될 녀석을 만들어 주는 프로그램이라고 얘기하고 있다. c/c++ 를 배웠던 사람이라면 pre-processor 가 무엇인지 알 것이다.
여튼 이것은 관점의 차이이고, Less 는 css 를 만들어 주는 compiler 라고 생각하면 될 것이다.

ref. 4 에 있는 것처럼 less 에서는

1. Command line Usage : command line 에서 .less 를 compile 해서 .css 를 만드는 방법과 
2. Using Less in the Browser(client-side less in production) : browser 에 직접 .less 와 less.js 를 include 시켜서 바로 compile 해서 사용하는 방법을 제공하고 있다.

LESS 에서는 기본적으로 이 compile 을 javascript 를 이용해서 dynamic 하게 한다. 무슨 이야기인가 하면, browser 에 .less 와 이 .less 를 compile 해주는 javascript 를 같이 include 시켜서 compile 해서 .less 를 .css 로 바꾸고 이렇게 얻어진 .css 를 다시 load 해서 사용하는 것이다. 이 때 이 javascript 가 less.js 이다.

기본적으로, 여기를 보면 client-side less in production 은 사용을 권하지 않는다.

Less 설치

less.js

less.js 는 아래 경로에서 download 할 수 있다.

• Getting started | Less.js

lessc

Less 에서 제공하는 command line compiler 인 lessc 도 javascript 로 되어 있다. 그래서 이녀석은 Node.js 를 설치해서 사용해야 한다.

windows 에서 node.js 를 설치하고, 아래처럼 command 를 날리면 less 가 설치된다. 참고로 그냥 nodejs/node_modules/less 에 설치를 하려면 -g option 을 빼자.

c:\Program Files\nodejs>npm.cmd install less -g
C:\Users\namhadmin\AppData\Roaming\npm\lessc -> C:\Users\namhadmin\AppData\Roaming\npm\node_modules\less\bin\lessc
less@1.7.3 C:\Users\namhadmin\AppData\Roaming\npm\node_modules\less
├── graceful-fs@2.0.3
├── mime@1.2.11
├── mkdirp@0.3.5
├── clean-css@2.1.8 (commander@2.1.0)
├── source-map@0.1.37 (amdefine@0.1.0)
└── request@2.34.0 (forever-agent@0.5.2, tunnel-agent@0.3.0, aws-sign2@0.5.0,
 json-stringify-safe@5.0.0, oauth-sign@0.3.0, qs@0.6.6, node-uuid@1.4.1, tough-c
ookie@0.12.1, hawk@1.0.0, http-signature@0.10.0, form-data@0.1.4)

c:\Program Files\nodejs>npm.cmd install less
less@1.7.3 node_modules\less
├── graceful-fs@2.0.3
├── mime@1.2.11
├── mkdirp@0.3.5
├── clean-css@2.1.8 (commander@2.1.0)
├── source-map@0.1.37 (amdefine@0.1.0)
└── request@2.34.0 (forever-agent@0.5.2, aws-sign2@0.5.0, tunnel-agent@0.3.0,
 oauth-sign@0.3.0, qs@0.6.6, json-stringify-safe@5.0.0, node-uuid@1.4.1, tough-c
ookie@0.12.1, http-signature@0.10.0, hawk@1.0.0, form-data@0.1.4)

아래 경로에 보면 실행파일이 있다. 이녀석을 이용하면 된다.

• c:\Program Files\nodejs\node_modules\.bin\lessc.cmd

사용법

사용법은 ref. 5 를 참조하자. 여기서는 예제와 간단한 설명들만 적어놓는다.

Variables

@varName: #ffeedd;
@defaultVarName: @varName + #111111;

.test{
    background:@defaultVarName;
}

Mixins

class 를 재사용할 수 있다.

/***************************/
.Round, #rr{
    -webkit-border-radius:9999px;
       -moz-border-radius:9999px;
            border-radius:9999px;   
}
 
#box{
    #rr;
}
#box2{
    .Round(); //parenthesis are optional
}

.my-hover-mixin() {
  border: 1px solid red;
  
}

뒤에 () 를 붙이는 경우는 less 내에서만 쓰인다. .css 로 compile 되면 아무것도 만들어지지 않는다. 

.my-hover-mixin() {
  &:hover {
    border: 1px solid red;
  }
}
button {
  .my-hover-mixin();
}

/* Output */
button:hover {
  border: 1px solid red;
}

#name-space{
  .inner {
    color: red;
  }
  .out() {
    color: blue;
  }
}

.c {
  #name-space.inner;
}
.d {
  #name-space.out();
}

parent selector &
compile 을 하면, &부분이 parent selector 로 replace 된다고 보면 될 듯 하다. 만약 parent selector 가 ','(comma) 로 여러개가 있다면 한번씩 전부 사용된다.

p, a {
border-top: 2px dotted #366;
  & + & {
      border-top: 0;
  }
}


/* output */
p,a{
  border-top: 2px dotted #366;
}

p + p,
p + a,
a + p,
a + a {
  border-top: 0;
}

import

@import "foo"; // less 의 import 로 인식한다.
@import "foo.css"; // .css 의 확장자를 가지고 있어서 css 의 import keyword 로 인식한다.

기본적으로 Less 의 @import 는 file 의 확장자를 보고 file 을 인식한다. 그런데 이것을 강제할 수도 있다.

• .less로 인식 : @import (less) "file.css"
• .css 로 인식 : @import (css) "file.less"

그리고 css 의 @import 와는 다르게 아무곳에서 @import 를 해줘도 된다.

when

.mixin(@a) when (@a>10) and (@a< -10)
.mixin(@a) when (@a>10), (@a< -10)
.mixin(@a) when not (@a>10)

& when (@my-option = true) {
  button {
    color: white;
  }

  a {
    color: blue;
  }
}

button 과 a 에 같은 when 을 적용할 때

loop

loop을 만들때는 recursive call 을 이용한다.

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

  .generate-columns(@n, (@i + 1));

}

GUIs

개발을 위해서는 GUI 가 나을 듯 하다.

• Usage | Less.js >> GUIs for Less
• sublime text syntax: danro/LESS-sublime · GitHub

References

1. DON’T READ this Less CSS tutorial (highly addictive) | @verekia's blog
2. 아는게 이것밖에 없어 ::: IT와 여행 :: CSS 프리프로세서인 LESS 사용하기
3. Preprocessor - Wikipedia, the free encyclopedia
4. Usage | Less.js
5. Language Features | Less.js
6. Bootstrap 3 Less Workflow Tutorial | Experience Design at Hello Erik