less

 

less.docx

 

Play Framework에서는 CSS를 좀더 쉽고 간편하게 개발할수 있는 LESS를 지원합니다. 그냥 stylesheet에 CSS대신 LESS문법을 넣어놓는다면, 그대로 플레이 프레임워크는 컴파일을 자동적으로 해주게 됩니다. LESS를 이용하는 이유는 다음과 같습니다.

 

- Variables And Calculation : @을 이용한 변수설정 및 사칙연산이 가능합니다.

- Mix-In : 여러 속성을 하나로 묶어, 함수형식으로 다른 클래스에서 콜합니다.

- Nested Rule : 태그안에 태그를 포함합니다.

 

첫번째 특성부터 봐볼까요? LESS에서는 @를 이용해 자신만의 변수를 설정할수있습니다.

 

CSS	LESS
#header {   color: #4f4f4f; }   h1 {   color: #4f4f4f; }	@myColor: #4f4f4f;   #header {   color: @myColor; }   h1 {   color: @myColor; }

 

LESS가 이상하게 코드는 더 많습니다..만 전하고 있는 내용은 확실합니다. @ 기호로, 자신만의 칼라를 변수형태로 저장할수있습니다. 위의 LESS코드는 자동적으로 CSS코드로 바뀌어서 돌아가게 됩니다. 만약 자신만의 칼라를 정해두고 작업하는 경우 편하게 쓸수 있습니다. 하지만 여기서 끝이 아닙니다. 변수설정이 가능하다면, 혹시 연산은 가능하다면 더욱 편하게 쓸수 있지 않을까요? 아래와 같이 사칙연산으로도 색깔과 경계두께등을 조절할 수 있습니다.

 

@myBorder: 1px; @myColor: #111111;   h1 {    color: @myColor * 3;    border : @myBorder * 2; }

 

두번째로, LESS로는 함수형식으로 CSS를 구성할수도 있습니다. 공통적인 로직을 담아놓은 함수형식으로 CSS를 구성하고, 각각의 클래스에서 다시 클래스에서 다시 불러올수 있습니다. 만약, content-box나 border-radius, transition처럼 브라우저마다 태그가 변동이 생길수 있는경우, 이러한 기능을 이용하면 훨씬 태그가 간단해집니다.

 

/**예제 1, 매개변수가 없으면 자동으로 10px로 설정됩니다.**/ .rounded-corners (@radius: 10px) {   border-radius: @radius;   -webkit-border-radius: @radius;   -moz-border-radius: @radius; }   /**매개변수가 없이 기본값으로 설정됩니다 **/ .content_wrapper {   .rounded-corners; }   /**매개변수가 있는경우**/ #navigation {   .rounded-corners(10px); }     /**예제 2**, 일부는 고정값, 일부는 변수로 설정할수 있습니다./ .set_color(@myColor: #111111) {  border : 1px;  color : @myColor; }

 

세번째로, 가독성의 측면에서 호불호가 갈릴수 있겠지만, 태그 속성을 기술하는 브라켓 안에서 다시 태그 속성을 기술할수 있다는 것입니다. 사실 이부분은, 가독성 측면에서 불편한 부분도 있습니다. 적절한 내여쓰기와 editor의 신택스 컬러 기능이 없다면 기존의 방법보다 보기 불편할수 있습니다.

 

CSS	LESS
.wrapper h1 {   font-size: 20px;   font-weight: bold; }   .wrapper p {   font-size: 10px; }   .wapper p a {   text-decoration: none; }   .wrapper p a:hover {   border-width: 1px; }	.wrapper {   h1 {     font-size: 20px;     font-weight: bold;   }   p { font-size: 10px;     a { text-decoration: none;       &:hover { border-width: 1px }     }   } }

 

코드가 어느정도 줄어든 것을 확인할수있지만, 중괄호의 중첩상황이 많아졌기 때문에 신택스 에러가 날 확률이 커질 수 있다는 단점이 존재합니다.