[CSS] less, 너는 뭐가 다른거야?!

그동안 프로젝트를 진행하며 CSS, SASS, styled component까지 차례로 사용했었는데 이번 기업협업 프로젝트에서는 LESS를 사용한다고 하셨다. 처음 들어봤네 LESS...
이름을 보아하니 SASS 친구인거 같긴 한데... 써야하니 좀 알아보고 가겠다 LESS!!

LESS란?

LESS는 CSS에 Script의 능력(변수, 함수, 연산, 중첩, 스코프등등)을 덧붙여 확장한 언어이다. 클라이언트 또는 서버환경(node.js) 모두에서 실행된다.

LESS는 CSS Preprocessor(전처리기)로서 CSS를 변수나 Nested Rules을 이용하여 쉽고 빠르고 체계적으로 프로그래밍 할 수 있게 만든 것을 말한다. 이때 전처리기란 다른 프로그램의 입력으로 사용되는 출력을 생성하기 위해 그 입력 데이터를 처리하는 프로그램을 의미한다.
CSS 프리프로세서에는 LESS, SASS/SCSS, COMPASS 등이 있으며 그중에 LESS의 문법을 따라 프로그래밍 한 것을 LESS 라고 한다.

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

LESS의 사용

LESS 변수

변수를 사용하면 여러번 사용되는 값을 재사용할 수 있다.
그래서 무언가 수정해야 할 경우, 변수 부분의 코드 한 줄만 수정하면 여러 곳에서 사용되는 값이 한 번에 수정되는 장점이 있다.

@color: #4D926F; 

#header { 
	color: @color; 
} 

h2 { 
  color: @color; 
}

LESS Mixins

Mixin은 한 클래스 안에서 하나의 속성 이름으로 지정하는 방식을 통해 다른 클래스의 모든 속성들을 포함시킬 수 있도록 해 준다.
이것은 마치 변수들 같이 보이지만 사실은 클래스 전체를 의미한다. 믹스인은 또한 함수처럼 변수를 받아들이기도 한다.

.rounded-corners (@radius: 5px) { 
  border-radius: @radius; 
  -webkit-border-radius: @radius; 
  -moz-border-radius: @radius; 
} 
#header { 
  .rounded-corners; 
} 
#footer { 
  .rounded-corners(10px); 
}

Nesting

CSS 속성 상속을 위해 긴 선택자(selector)를 만드는 방법(#header p a {... }) 대신, 한 선택자를 다른 선택자 안에 포함시키는 것이 가능하다. 이를 통해 CSS 속성 상속을 훨씬 간결하게 할 수 있다.

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

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%); 
}