[CSS] Less 란 무엇인가?

[CSS] Less 란 무엇인가?

Less 란 무엇인가?

Less 는 CSS pre-processor 이다.

CSS language 의 확장판으로, variable, mixin, function 등의 추가적인 기능을 제공하는 언어이다.

유지보수가 더 좋고, theme 을 지정할 수 있고, 확장성도 좋다.

ex)

<less>

@base : #f938ab;

.box-shadow(@style, @c) when (iscolor(@c)){

-webkit-box-shadow:@style @c;

-moz-box-shadow: @style @c;

-box-shadow: @style @c;

}

.box-shadow(@style, @alpha: 50%) when 

(isnumber(@alpha)){

.box-shadow(@style, rgba(0,0,0,@alpha));

}

.box{

color:saturate(@base, 5%);

border-color:lighten(@base, 30%);

div{ .box-shadow(0 0 5px, 30%) }

}

<compile version>

.box{

color:#fe33ac

border-color:#fdcdea;

}

.box div{

-webkit-box-shadow: 0 0 5px rgba( 0, 0, 0,0.3 );

-moz-box-shadow: 0 0 5px rgba( 0, 0, 0,0.3 );

-box-shadow: 0 0 5px rgba( 0, 0, 0,0.3 );

}

Less 설치하기

$ npm install -g less

Less Command-line 사용법

stdout 으로 output 이 나온다. 

$ lessc styles.less

파일로 저장하려면

$ lessc styles.less > styles.css

minified css 로 저장하려면 -x 와 --clean-css 를 주면 된다.

$ lessc -x styles.less 

코드에 적용하기

개발단계에서는 .less 파일을 바로 연결할 수 있지만, 그렇지 않으면 pre-comipled 된 녀석을 사용하는 것이 좋다.

less.js 는 여기서 다운받을 수 있다.

https://github.com/less/less.js/archive/master.zip

<연결>

<!-- style sheet first and script later -->

<!-- if several less files are linked, each of them is independent, and does not share anything -->

<link rel="stylesheet/less" type="text/css" href="styles.less"/>

<script src="less.js" type="text/javascript"></script>

<less 의 cdn 주소 링크> 

<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/1.6.2/less.min.js"></script>

bower 를 이용하여 설치도 가능하다.

bower, CDN, clean-css, Compile, compile version, css, css compile, css language, css pre processor, function, less, less command line, less 설치, less.js, less.min.js, lessc, Link, minified css, mixin, NPM, REL, styles.css, stylesheet/less, text/css, Theme, variable, X, [CSS] Less 란 무엇인가?, 언어, 유지보수, 컴파일, 코드, 코드 적용, 확장성, 확장판