우분투2014. 6. 17. 11:29

CSS에서는 변수를 사용할 수 없습니다.

그래서 같은 코드를 여러번 입력해야 하는 불편이 있습니다.

이러한 단점을 보완해주는 것이 Less입니다.

변수와 여러 함수를 이용하여 CSS 코드를 만들 수 있습니다.

Less 문법으로 코드를 짠 후 컴파일을 하면 CSS 파일로 변환됩니다.

따라서 컴파일이 가능하도록 프로그램을 설치해야 합니다.

Ubuntu를 사용하고 있다면, 단 한줄의 코드로 관련 프로그램을 설치할 수 있습니다.

apt-get install node-less

설치를 했다면 테스트를 해봐야겠죠. 다음의 내용으로 style.less 파일을 만듭니다.

@nice-blue: #5B83AD;
@light-blue: @nice-blue + #111;
#header {
  color: @light-blue;
}

다음과 같이 명령합니다.

lessc style.less > style.css

style.less가 있는 폴더에 style.css가 만들어집니다. 내용은 다음과 같습니다.

#header {
  color: #6c94be;
}

CSS 코딩을 할 때 변수를 사용하거나 함수를 이용할 수 있다는 것은 상당히 매력적입니다. 하지만, 공부할 거리가 더 생기는군요.

프로그래머는 계속 새로운 기술이 나와서 평생 지루하지 않은(?) 직업 같습니다.

Posted by 다오나무