본문 바로가기
프로그래밍 놀이터/Web

[CSS] Less 란 무엇인가?

by 돼지왕 왕돼지 2014. 2. 10.
반응형


 [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 를 이용하여 설치도 가능하다.






반응형

댓글0