[CSS]Less 알아보기 Less.js

CSS 전처리기인 Less.js에 대하여 알아봅시다.

본 포스팅은 http://lesscss.org/ 를 한글로 번역한 문서입니다.

개요

Less는 CSS의 하위호환된 언어입니다. 본 포스팅은 Less 공식 문서를 번역한 것으로, Less 언어 와 Less.js에 대한 

내용으로 구성되어 있으며, 이것은 Less 스타일을 CSS 스타일로 변환해주는 자바스크립트 툴 입니다.

이 글에서는 Less의 간단한 기능들을 살펴보겠습니다.

설치

Node.js 에서 사용하기

> npm install -g less

> lessc styles.less styles.css

브라우저에서 단에서 사용하기

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

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

변수

변수에 대한 내용은 크게 설명하지 않아도 쉽게 이해할 수 있습니다.

@nice-blue : #5B83AD;

@light-blue : @nice-blue + #111;

.box {

color : @light-blue;

}

위 코드를 컨버팅 하면, CSS 코드는 이렇게 바뀝니다.

.box {

color: #6c94be;

}

믹스인

믹스인은 하나의 룰셋에서, 다른 룰셋으로 한 뭉텅이의 속성들을 믹스인(혼합) 하는 방법입니다. 

쉽게 말해 여러개의 속성들을 하나의 뭉텅이로 보고, 다른 룰셋에서 원래 있던 속성들과 뭉텅이를 혼합해서 사용하는 방법 입니다.

다음과 같은 border를 적용하는 클래스가 있다고 가정합시다.

.bordered {

border-top: dotted 1px black;

border-bottom: solid 2px black;

}

이때, 우리는 위와 같은 속성들을 다른 룰셋안에서 같이 사용하고 싶습니다. 그러기 위해서는 단순히 클래스 이름을

적용하고 싶은 프로퍼티 안에다가 떨구면 됩니다!

#menu a {

color: #111;

.bordered;

}

.post a {

color : red;

.bordered;

}

이제   .bordered  클래스의 속성들은 #menu 의  a  태그, 그리고  .post 의  a  태그 안에서 확인할 수 있습니다

중첩

Less는 단순한 캐스캐이딩 대신 캐스캐이딩과 함께 중첩하여 사용할 수 있는 기능을 제공합니다. 

다음 예제를 보겠습니다.

#header {

color: black;

}

#header .navigation {

font-size: 12px;

}

#header .logo {

width: 300px;

}

다음과 같이 #header 요소 밑에 있는 요소들에 스타일을 적용하기 위해 따로 따로 스타일 지정을 해주었습니다.

하지만 Less 에서는 다음과 같이 중첩하여 사용할 수 있습니다.

#header {

color: black;

.navigation {

font-size: 12px;

}

.logo {

width: 300px;

}

}

위와 같은 Less 코드는 전보다 간결해지며, HTML 구조와 비슷합니다.

또한, 가상 선택자를 믹스인을 사용하여 번들링할 수 있습니다. 다음 코드는 믹스인을 사용한 clearfix 핵 입니다. 

.clearfix {

display: block;

zoom: 1;

&:after {

content: " ";

display: block;

font-size: 0;

height: 0;

clear: both;

visibility: hidden;

}

}