Less 입문 - 기초 문법 알아보기

 

 

👀 Less가 뭔가요? 

Less는 Ant Design, Bootstrap, Cardinal, Semantic UI 등에서 사용하고 있는 CSS 전처리기이다.

Less는 Leaner Style Sheets의 약자이자, '더 적은'이라는 의미이기도 하다. CSS를 더 간결하고 쉽게 작성할 수 있음을 어필하는 이름인 듯 하다.

It's CSS, with just a little more.
- Less 슬로건

 

현재(2022. 01월) 기준 Less의 최신 버전은 4.1.2이다.

Less 언어에서 지원하는 편리한 문법들을 하나씩 익혀보자.

 

📚 변수 (Variables) 

변수명 앞에 앳 사인(@)를 붙이고, 콜론(:)뒤에 할당할 값을 적어주면 된다. 

@width: 10px;
@height: @width + 10px;

#header {
  width: @width;
  height: @height;
}

 

자바스크립트의 스코프체이닝과 비슷하게 동작해서, 더 가까운 스코프 내에 값을 따라간다. 또, 호이스팅이 일어나서 꼭 윗 라인에서 변수를 정의할 필요가 없다.

@var: red;

#page {
  #header {
    color: @var; // white
  }
  @var: white;
}

비슷한 변수를 그룹으로 묶어 객체처럼 사용하고 싶다면 아래와 같이 사용할 수 있다.

 

📚 믹스인 (Mixins)

중복된 스타일을 재활용하고 싶다면 다음과 같이 믹스인을 만들어 사용할 수 있다.

.bordered {
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}

#menu a {
  color: #111;
  .bordered();
}

.post a {
  color: red;
  .bordered();
}

 

📚 중첩 (Nesting)

순수 CSS 처럼 캐스케이딩을 일일이 나열하지 않고 중첩해서 더 간결하게 표현할 수 있다. pseudo 셀렉터도 앰퍼샌드(&)로 연결해서 편리하게 사용할 수 있다.

#header {
  color: black;

  .logo {
    width: 300px;
    
    &::after {
    content: " ";
    display: block;
    font-size: 0;
    height: 0;
    clear: both;
    visibility: hidden;
    }
  }
}

 

📚 연산 (Operations)

더하기(+), 빼기(-), 곱하기(*), 나누기(/) 와 같은 연산을 지원한다.

숫자 뿐만 아니라 색상, 변수를 대상으로 연산할 수 있다. 만약 단위가 서로 다를 경우 가장 먼저 등장한 단위로 변환된다.

// 단위를 고려해서 계산햔다. 가장 먼저 등장한 단위로 맞춰준다.
@conversion-1: 5cm + 10mm; // 6cm
@conversion-2: 2 - 3cm - 5mm; // -1.5cm
@base: 2cm * 3mm; // 6cm
@color: #224488 / 2; //#112244
background-color: #112244 + #111; // #223355

// 단위 환산에는 실패했지만, 그냥 숫자끼리라도 계산하고 먼저 등장한 단위로 맞춰준다.
@incompatible-units: 2 + 5px - 3cm; // 4px

// 변수도 연산의 대상이 된다.
@base: 5%;
@filler: @base * 2; // 10%
@other: @base + @filler; // 15%

 

 

📚 함수 (Functions)

Less는 유용한 함수를 많이 지원한다.

다음과 같이 기본적인 수학 함수를 제공한다.

ceil(2.4) // 3
floor(2.6) // 2
percentage(0.5) // 50%
round(1.67) // 2
round(1.67, 1) // 1.7
sqrt(25cm) // 5cm
abs(-18.6%) // 18.6%
pi() // 3.141592...
pow(25, 0.5) // 5
mod(11cm, 6px); // 5cm
min(3px, 42px, 1px, 16px); // 1px
max(3%, 42%, 1%, 16%); // 42%

 

자바스크립트의 삼항연산자와 비슷한 if  논리 함수를 사용할 수 있다.

/* if(condition, value1, value2) */
/* boolean(condition) */

@some: foo;
@someIsBool: iscolor(@some);

div {
    margin: if((2 > 1), 0, 3px); // 0
    color:  if((someIsBool), @some, black);
}

 

true/false 값을 반환해주는 유용한 판별함수도 있다.

isnumber(1234);     // true
isnumber(56px);     // true

isstring("string"); // true

iscolor(#ff0);     // true
iscolor(blue);     // true

ispixel(56px);     // true
isem(7.8em);    // true
ispercentage(7.8%);     // true

isunit(11px, px);  // true
isunit(2.2%, px);  // false

@foo: 1;
isdefined(@foo);     // true
isdefined(@bar);     // false

 

list 와 each 를 결합한 이용한 스타일링도 가능하다. each 내에서 @{key}, @{value}, @{index}  로 각각 키, 값, 인덱스를 가져올 수 있다.

/* each(list, rule) */
@set: {
  one: blue;
  two: green;
  three: red;
}

.set {
  each(@set, {
    @{key}-@{index}: @value;
  });
}

/* 컴파일 결과 */
.set {
  one-1: blue;
  two-2: green;
  three-3: red;
}

 

이밖에도 색상 연산을 지원하는 함수의 screen이나 overlay도 유용해보인다. 그 외 유용한 함수 가 많이 지원된다.

 

📚 가져오기 (Imports)

less 파일을 작성하고 다음과 같이 가져와 사용할 수 있다.

@import "library"; // library.less

 

 

 

참고자료

Less 공식 홈페이지