쿠...sal: [컴][웹] LESS 사용해 보기

LESS 란

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

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

Command line Usage : command line 에서 .less 를 compile 해서 .css 를 만드는 방법과
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();
}

Theme 만들기

less 에서 theme 을 만들기는 수월하다. theme 은 body 의 class 에 설정될 녀석인데, 이 녀석의 이름을 정하고 이 css 안에서 다른 css 들을 정의하면 된다. 여기서는 .theme-default 라는 이름의 class 를 만들 것이다.

theme color 와 연관된 부분을 만들고 싶다면, mixin 을 만들자. 그래서 이 mixin 의 parameter 로 color 를 넘겨주면 된다. 물론 직접 써 넣어도 되지만, 나중에 관리를 위해서나 가독성을 위해서나 mixin 으로 빼 놓자.

아래처럼 만든 .theme-default 는 body 의 class 로 넣어주면 된다.

.theme-default {
  @primary-color: #1d89cf;
  
  //
  .mytable-theme(@primary-color)
}

.mytable-theme(@color) {
  .mytable-drop-active,
  .mytable-active .mytable-choices,
  .mytable-dropdown-open .mytable-choices {
    border: 1px solid @color;
  }

  .mytable-drop.mytable-drop-above.mytable-drop-active {
    border-top: 1px solid @color;
  }
}

// .html
<body class="theme-default">

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)

mufs


& 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

Web less2css

http://less2css.org/

웹에서 less 를 작성하면 바로바로 css 로 보여주는 사이트이다. less 를 분석할 때나 직접 작성할 때 유용하다.

Web css2less

CSS 2 LESS - automatically convert CSS to LESS with variables

쿠...sal

[컴][웹] LESS 사용해 보기