Modern web LESS Framework(모던 웹 less 프레임워크)

About LESS

CSS는 html을 꾸며주는 언어로서 정보와 표현을 분리해 주고 많은 장점을 가지고 있습니다. 

하지만 불편한 점도 가지고 있습니다. 

이를테면 작성하기는 쉽지만, 개발자 도구 없이는 유지보수하는 것이 매우 어렵습니다. 

또한 동적인 언어의 특징인 변수나 함수와 같은 특성을 가지고 있지 않기 때문에 많은 양의 코드가 동원되기도 합니다. 

이러한 문제를 해결하기 위해서 기술 중의 하나가 lesscss입니다. 

lesscss는 보다 간결하고 유지보수하기 쉬운 css를 만드는데 도움을 줍니다.

LESS 란?

LESS는 CSS에 Script의 능력(변수, 함수, 연산, 중첩, 스코프등등)을 덧붙여 확장한 언어입니다.

그리고 LESS는 클라이언트 또는 서버환경(node.js) 모두에서 실행됩니다.

LESS는 CSS Preprocessor(전처리기)로서  CSS를 변수나 Nested Rules을 이용하여 쉽고 빠르고 체계적으로 프로그래밍 할 수 있게 만든 것을 말합니다. 

전처리기는 다른 프로그램의 입력으로 사용되는 출력을 생성하기 위해 그 입력 데이터를 처리하는 프로그램입니다.

CSS 프리프로세서에는 LESS, SASS/SCSS, COMPASS 등이 있으며 그중에 LESS의 문법을 따라 프로그래밍 한 것을 LESS 라고 합니다. 

그리고 LESS는 CSS의 확장버전으로 하위호환성이 뛰어나며 CSS의 기존 문법을 그대로 사용하기 때문에 익히기도 쉽습니다.

이제 LESS 에서 사용되는 문법이 어떻게 사용되는지 빠르게 훒어 보도록 하겠습니다.

좀 더 자세한 문법은 이 포스팅이 아닌 다른 글에서 설명하도록 하겠습니다.

LESS 변수

변수를 사용하면, 여러 곳에서 사용하는 값을 한 곳에 모아둘 수 있습니다. 

그리고 스타일 시트 전체에서 사용할 수 있습니다. 

그래서 무언가 고쳐야 할 때에, 변수 부분의 코드 한 줄만 수정하면 여러 곳에서 사용되는 값을 한 번에 수정되어서 작업이 보다 수월해 질 수 있습니다.

LESS

@color: #4D926F;
 
#header {
 color: @color;
}
h2 {
 color: @color;
}

컴파일한 CSS

#header {
 color: #4D926F;
}
h2 {
 color: #4D926F;
}

LESS 믹스인 (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;
}

LESS에서 사용하는 중첩 또는 포함에 관한 규칙

CSS 속성 상속을 위해 긴 선택자(selector)를 만드는 방법(#header p a {... }) 대신, LESS에서는 한 선택자를 다른 선택자 안에 포함시킬 수 있습니다.

이를 통해 CSS 속성 상속을 훨씬 더 간결하게, 그리고 스타일 시트를 짧게 작성할 수 있습니다.

LESS

#header {
 h1 {
   font-size: 26px;
   font-weight: bold;
 }
 p { font-size: 12px;
   a { text-decoration: none;
     &:hover { border-width: 1px }
   }
 }
}

컴파일한 CSS

#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;
}

LESS 함수와 연산

스타일시트 안의 어떤 요소들이 다른 요소들에 대해 비례하고 있다면 수학 연산자를 사용, 정의할 수 있습니다.

연산 (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;
}

위의 LESS 코드 중에 desaturate() 는 LESS에 내장된 함수입니다.

지금까지 LESS 문법중의 일부분만 살펴보았으며 다른 포스팅에서 LESS 문법에 대해 차근차근 설명해 나가겠습니다.

참고 관련 링크

1. LESS 생활코딩
2. 기존의 CSS를 lesscss로 변환하기
3. LESS Live Preview

Jaehee's WebClub