lesscss란 무엇인가?
css는 html을 꾸며주는 언어입니다. 정보와 표현을 분리해주는 언어로 많은 장점을 가지고 있습니다. 하지만 단점도 있는데요. 이를테면 작성하기는 쉽지만, firebug와 같은 도구 없이는 유지보수하는 것이 매우 어렵습니다. 또 동적인 언어의 특징인 변수나 함수와 같은 특성을 가지고 있지 않기 때문에 많은 양의 코드가 동원되기도 합니다.
이런한 문제를 해결하기 위해서 기술 중의 하나가 lesscss입니다. lesscss를 보다 간결하고 유지보수하기 쉬운 css를 만들 수 있습니다.
lesscss와 유사한 기술로는 sass가 있습니다.
이 문서에 대해서
- 원문 : lesscss.org
- 번역 : 개발자 영어
- 동영상강의 : 생활코딩
대상
- html/css에 대한 기초적인 지식을 알고 있는 분들
- css를 효율적으로 관리하고 싶은 분들
기존의 CSS를 lesscss로 변환하기
변수
변수를 사용하면, 이곳저곳에서 사용하는 값을 한 곳에 넣어둘 수 있습니다. 그리고 스타일 시트 전체에서 사용할 수 있죠. 그래서 무언가 고쳐야 할 때에, 변수 부분의 코드 한 줄만 바꾸면 되어서 작업이 편해집니다.
LESS
@color: #4D926F;
#header {
color: @color;
}
h2 {
color: @color;
}
컴파일한 CSS
#header {
color: #4D926F;
}
h2 {
color: #4D926F;
}
믹스인 (Mixins)
믹스인(Mixin)은 한 클래스 안에서 하나의 속성 이름으로 지정하는 방식을 통해 다른 클래스의 모든 속성들을 포함시킬 수 있게 해줍니다. 이것은 마치 변수들 같지만 사실은 클래스 전체를 의미합니다. 믹스인은 또한 함수처럼 변수도 받아들이기도 합니다. 아래의 예시를 보세요.
LESS
.rounded-corners (@radius: 5px) {
border-radius: @radius;
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
}
#header {
.rounded-corners;
}
#footer {
.rounded-corners(10px);
}
컴파일한 CSS
#header {
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}
#footer {
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
}
중첩 또는 포함에 관한 규칙
CSS 속성 상속을 위해 긴 선택자(selector)를 만드는 방법 대신, LESS에서는 한 선택자를 다른 선택자 안에 포함시킬 수 있습니다. 이를 통해 CSS 속성 상속을 훨씬 더 간결하게, 그리고 스타일 시트를 짧게 만들 수 있습니다.
#header {
h1 {
font-size: 26px;
font-weight: bold;
}
p { font-size: 12px;
a { text-decoration: none;
&:hover { border-width: 1px }
}
}
}
#header h1 {
font-size: 26px;
font-weight: bold;
}
#header p {
font-size: 12px;
}
#header p a {
text-decoration: none;
}
#header p a:hover {
border-width: 1px;
}
함수와 연산
스타일시트 안의 어떤 요소들이 다른 요소들에 대해 비례하나요? 연산 (operation)은 속성값과 색상값들을 더하고, 빼고, 곱하고 나누게 하는 것을 통해 속성들 사이의 복잡한 관계들을 정의할 수 있게 해줍니다. 함수는 자바스크립트 코드와 일대일 대응을 시켜 당신이 원하는 속성값들은 무엇이든지 생성해 낼 수 있게 합니다.
LESS
@the-border: 1px;
@base-color: #111;
@red: #842210;
#header {
color: @base-color * 3;
border-left: @the-border;
border-right: @the-border * 2;
}
#footer {
color: @base-color + #003300;
border-color: desaturate(@red, 10%);
}
컴파일된 CSS
#header {
color: #333;
border-left: 1px;
border-right: 2px;
}
#footer {
color: #114411;
border-color: #7d2717;
}
다른 언어로 보기
- 러시아어: http://lesscss.ru
- 중국어: http://lesscss.net
- 일본어: http://less-ja.studiomohawk.com/
- 벨라루스어: http://www.designcontest.com/show/lesscss-be
About
LESS는 Alexis Sellier가 개발했습니다. 그는 cloudhead라는 닉네임으로 좀 더 널리 알려져 있습니다.
powered by LESS
Copyright © Alexis Sellier 2010-2012
