LESS - The dymamic Stylesheet language
이 글에서는 LESS를 사용함에 있어 초기화하고 LESS를 컴파일 하는 방법에 대해 간단히 알아보겠습니다.
필자는 에디터 webstorm을 사용하고 있기 때문에 이 에디터를 통해 LESS 컴파일을 하고 있습니다.
필자의 에디터에서 컴파일하는 방법은 설명하지 않고 GUI 기반 및 CLI 에서 사용하는 법에 대해 간단히 소개하고자 합니다.
에디터 중에 Atom, Bracket 을 사용하여 해당 에디터에서 LESS 플러그인 autoComplie 을 설치하면 좀 더 수월하게 컴파일할 수 있습니다.
LESS 적용하기
LESS의 문법으로 작성하기 위해서는 .less 확장자의 파일을 생성하여 LESS를 작성해야 합니다.
그리고 이 파일은 HTML에서 바로 사용,적용이 되지는 않습니다.
해당 파일을 브라우저가 이해할 수 있도록 컴파일(CSS로의 변환작업)을 주어야 합니다.
여기에는 2가지 방법이 있습니다.
하나는 less에서 제공해주는 less.js파일을 생성한 .less파일 아래쪽에 링크시켜서 해석할 수 있게 해주거나 WinLESS는 외부 컴파일러(GUI기반)로 컴파일하여 생성된 CSS파일을 가지고 기존 CSS 링크방식과 같이 링크시켜주면 됩니다.
이 외에도 컴파일하는 방법은 다양(에디터 내의 autoComplile 이용)하게 있습니다.
less.js를 링크하여 적용하기
lesscss 사이트에서 제공해주는 less.js를 링크걸어 사용하는 방법입니다.
장점이라면 별로의 컴파일 없이 less.js 파일만 적용하면 되기 때문에 쉽게 확인하고 반영이 가능합니다.
단점이라면 IE9 이상버전과 크롬, 파이어폭스 등에서는 적용이 됩니다만 IE8이하 버전에서는 적용이 되지 않습니다.
또한 반응속도가 약간느려서 코드가 많고 복잡할경우 렌더링에 지연이 있을 수 있습니다.
HTML 에 적용하기
다운로드 받은 파일을 HTML의 less파일 아래에 적용합니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<title>less</title>
<link rel="stylesheet/less" type="text/css" href="style.less">
<script src="less.js" type="text/javascript"></script>
</head>
<body>
<div>
<header>
<h1>index</h1>
</header>
</div>
</body>
</html>LESS Client-side Usage 에서 less.js 다운로드 가능
그리고 주의할 점은 .less 링크 아래에 less.js 를 작성해야 한다는 점입니다.
다음으로 GUI 기반으로 CSS로 변환할 수 있는 GUI기반의 컴파일러 도구를 이용할 수 있습니다.
.css 파일로 변환된 파일을 가지고 기존에 작성하던 방식으로 해당 CSS 파일을 링크하여 사용하시면 됩니다.
단, CSS로 변환하여 링크를 거는 경우에는 위에서 사용된 less.js는 더이상 사용하지 않습니다.
서버쪽 사용 방법
이번에는 LESS를 서버에 설치하는 방법에 대해 알아봅니다.
방법은 npm, 노드 패키지 매니저(Node Package Manager) 를 이용하는 겁니다. (npm은 node.js가 설치되어 있어야 합니다)
방법은 다음과 같습니다:
Installation
$ npm install -g less커맨드 라인 명령 사용법
한 번 설치하면 다음과 같은 명령 줄에서 컴파일러를 호출 할 수 있습니다.
$ lessc styles.less컴파일하려는 CSS를 사용자 정의하여 CSS파일을 생성저장하려면 다음과 같이 할 수 있습니다.
$ lessc styles.less styles.css
$ lessc styles.less > styles.cssCSS 파일을 압축 축소하여 출력하려면 clean-css plugin 를 사용할 수 있습니다.
플러그인이 설치되어 있다면 --clean-css 를 옵션으로 지정하면 compess 모드로 출력할 수 있습니다.
$ lessc --clean-css styles.less styles.min.css압축 파일을 생성하는 방법은 위에 언급된 방식이외에 less 파일에 직접 작성하여 컴파일하는 방법도 있습니다.
// out: style.css, sourcemap: true, compress: trueless 파일의 최상단에 compress 를 true로 설정하면 됩니다. false 라면 압축되지 않은 파일로 생성됩니다.
'StyleSheet > LESS' 카테고리의 다른 글
| LESS Parametric Mixins (0) | 2016.09.29 |
|---|---|
| LESS 변수 & 믹스인(Mixins) (2) | 2016.09.29 |
| LESS 변수 (0) | 2016.09.29 |
| LESS Syntax 시작하기 (0) | 2016.09.29 |
| Modern web LESS Framework(모던 웹 less 프레임워크) (0) | 2016.09.29 |
