[CSS/Lang] LESS

😃 서론

오랜만에 CSS 라이브러리 포스팅을 진행하는 것 같다.

Less 같은 경우엔 내가 선택했다기 보다, 현재 회사에서 쓰이는 언어이다.

 

리드 엔지니어님께서 쓰시는 패턴을 차용해서 작업을 진행하다보니, 확실히 CSS 코드가 눈에띄게 짧아짐을 느꼈다.

또, 믹스인들로 구성한 문법이 마치 또다른 언어같지만, 눈에 익다보면 CSS 약어와 비슷하여 금방 적응도 되었다.

 

앞으로 리뉴얼되는 우리의 코드에는 Less가 더 적극적으로 쓰이며, 나 역시도 Vue 개인 프로젝트를 진행할 때 Less를 많이 사용할 것 같아 좀 더 원론적으로 정리하고자 이 글을 포스팅하게 시작했다.

---

🔵 Less 란?

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

 

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

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

(LESS, SASS/SCSS, COMPASS 등이 CSS 전처리기에 해당)

 

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

 

- Less 사용

LESS는 클라이언트와 서버 모두 적용할 수 있다. 그렇기에, 통상 npm으로 많이 설치한다.

npm install less -g
npm i less --save-dev

 

혹은, 클라이언트에서 CDN 혹은 Javascript 소스로도 적용할 수 있다.

<link rel="stylesheet/less" type="text/css" href="styles.less" />
<script src="less.js" type="text/javascript"></script>

 

🔵 Less 문법

1. Variables (변수)

변수를 사용해서 색깔 등 여러번 사용되는 값을 재사용할 수 있다.

@color: #4D926F; 

#header { 
	color: @color; 
} 

h2 { 
  color: @color; 
}

 

2. Mixins (믹스인)

한 클래스('.rounded-corners')에서 다양한 속성을 지정하기 위한 문법이다. 사용시에도, 클래스처럼 .[클래스명]을 준다.

이 뿐만 아니라, 함수처럼 변수를 입력받아 내부 속성에 지정할 수도 있다.

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

 

* Mixins with Parameter(파라미터 믹스인)

위처럼, LESS 믹스인은 매개변수를 넘겨받을 수 있으며, 여러개의 변수를 받거나 이것의 디폴트 값도 설정할 수 있다.

특히, @arguments 라는 키워드를 통해 믹스인이 넘겨받는 인자들을 모두 가져올 수 있다.

.box-shadow (@x: 0, @y: 0, @blur: 1px, @color: #000) {
 box-shadow: @arguments;
 -moz-box-shadow: @arguments;
 -webkit-box-shadow: @arguments;
}
.box-shadow(2px, 5px);

// 컴파일 후
box-shadow: 2px 5px 1px #000;
-moz-box-shadow: 2px 5px 1px #000;
-webkit-box-shadow: 2px 5px 1px #000;

 

3. Nested Rules (중첩규칙)

LESS 역시 SASS의 영향을 받은 언어인 만큼, CSS Cascading 대신 선택자간의 중첩을 통해 작성할 수 있다.

또한, 네스팅한 범위에 대해 Scope(범위) 원칙을 가진다.

일반 프로그래밍 언어와 같이, 변수와 믹스인은 먼저 지역 스코프에서 찾고, 찾을 수 없는 경우 컴파일러는 부모 범위 ~ 전역 스코프 순으로 찾게되는 것이다.

// LESS
#header {
  color: black;
  
  .navigation {
    font-size: 12px;
  }
  .logo {
    width: 300px;
  }
}

// CSS(혹은 컴파일)
#header {
  color: black;
}
#header .navigation {
  font-size: 12px;
}
#header .logo {
  width: 300px;
}

 

또한, 부모 선택자(&)를 통해 :hover, :focus 등의 효과와 ::before, ::after 를 만들 수 있다.

// LESS
.clearfix {
  display: block;
  zoom: 1;
  
  &::after {
    content: '';
    display: block;
    font-size: 0;
    height: 0;
    clear: both;
    visibility: hidden;
  }
}

// CSS(혹은 컴파일)
.clearfix {
  display: block;
  zoom: 1;
}
.clearfix::after {
  content: '',
  display: block;
  font-size: 0;
  height: 0;
  clear: both;
  visibility: hidden;
}

* clearfix는 자식 요소에 float 등을 줬을 때 부모의 wrapping을 벗어나 레이아웃이 깨지는 현상을 의미한다.

  이를 제어하기 위해, clear, ::after 등의 방법을 사용할 수 있다. (참고링크 : https://aboooks.tistory.com/328 )

 

* Nested Directives(중첩된 지시자) & Bubbling(버블링)

@media, @keyframe 과 같은 지시자는 선택자처럼 중첩해서 사용할 수 있다.

해당 코드가 컴파일되면, 지시자들은 상단에 배치되고(순서는 그대로), 스타일링은 지시문 바디에 복사된다.

// LESS
.screen-color {
  @media screen {
    color: green;
    
    @media (min-width: 768px) {
      color: red;
    }
  }
  
  @media tv {
    color: black;
  }
}

// 컴파일 후
@media screen {
  .screen-color {
    color: green;
  }
}
@media screen and (min-width: 768px) {
  .screen-color {
    color: red;
  }
}
@media tv {
  .screen-color {
    color: black;
  }
}

 

4. Functions (함수)

LESS는 색상변환, 문자열 조작, 수학계산 등 다양한 기능의 함수를 제공하고 있다.

* LESS 공식문서 - 함수 레퍼런스 : https://lesscss.org/functions/

.functions {
  width: percentage(@width);	// 50%
  color: saturate(@base, 5%);	// 채도 5% 증가
  background-color: spin(lighten(@base, 25%), 8);	// 밝기 25%증가, 8도 회전
}

 

5. Operators (연산자)

LESS는 값들간의 사칙연산(+, -, *, /)에 의거한 계산이 가능하다.

단위(units)도 통일되며, 변환이 불가능하거나 무의미한 경우엔 무시되거나 비정상적인 값이 산출될 수 있다.

@len-1: 5cm + 10mm;		// 6cm
@len-2: 2 - 3cm - 5mm;		// 1.5cm

@base: 5%;
@filter: @base * 2;		// 10%
@other: @base + @filter;	// 15%

@disable: 2 + 5px 0 3cm;	// ??

 

6. Comments (주석)

LESS 주석은 Javascript와 같이 // 이다. 대신, 이는 컴파일되지 않으며, /* */ 주석만이 CSS에 컴파일되어 출력된다.

/* CSS 주석 : 컴파일됨 */
// JS 주석 : 컴파일되지 않음
.comments { color: red; }

 

7. Import (파일 불러오기)

.less 파일 안에서, @import 키워드를 통해 다른 .less 파일들을 불러와 변수, 믹스인 등을 가져올 수 있다.

(기본 확장자는 .less)

@import "lib.less"; 
@import "lib";
@import "lib.css";

---

🔵 Less 코드 소개

내부적인 코드라 모든 걸 공유할 순 없지만, 대표적인 예제코드를 하나 소개한다.

이처럼, 믹스인을 약어처럼 만들 수도 있으며, 변수값들로 스타일링 할 수 있다. (.sv는 값에 단위 넣어주는 믹스인)

.abs() { position: absolute; }
.-b(@color, @v:1px) { .sv(@v); border-bottom: @_sv solid @color; }

아래와 같은 짧은 믹스인들로, 여러 줄이 될 수 있는 CSS를 1줄로 작성하니 확실히 가독성이 높아진다.

---

우려했던 것보다 깊은 내용은 없어서 내심 안심(?)했다. 

React는 styled-components를 애용하기 때문에, LESS 문법까지 적용할 경우가 많을 것 같지는 않다.

Vue의 경우에는 <style> lang을 LESS로 많이 사용하게 될 것 같다. (축약 및 가독성이 훨씬 좋아짐)

 

 

[출처]

- LESS 공식문서 : https://lesscss.org/usage/  

- WebClub 님의 블로그 : https://webclub.tistory.com/384

- TutorialPost : https://tutorialpost.apptilus.com/code/posts/css/less/

- CHAI53 님의 블로그 : https://velog.io/@ejchaid/less-%EB%84%88%EB%8A%94-%EB%AD%90%EA%B0%80-%EB%8B%A4%EB%A5%B8%EA%B1%B0%EC%95%BC