Less.js 전처리기 치트시트

Less.js는 변수, 믹스인, 연산, 내장 함수 등의 동적 기능을 통해 CSS를 강력하게 확장해 주는 전처리기입니다.

내장 함수

단위 연산 및 포맷팅

unit(30px / 5px)    // => 6
unit(5, px)         // => 5px

e("ms:stuff()")     // => ms:stuff()

%("count: %d", 1+2) // => "count: 3"

데이터 타입 검사 함수

iscolor(@x)         // Returns true if value is a color
isstring(@x)        // Returns true if value is a string
isnumber(@x)        // Returns true if value is a number
iskeyword(@x)       // Returns true if value is a keyword
isurl(url(...))     // Returns true if value is a url
ispixel(@x)         // Returns true if unit is px
isem(@x)            // Returns true if unit is em
ispercentage(@x)    // Returns true if unit is %
isunit(@x, rem)     // Returns true if value matches specified unit

색상 채널 조작

hue(@color)         // Returns the hue channel (0-360)
saturation(@color)  // Returns the saturation percentage
lightness(@color)   // Returns the lightness percentage
luma(@color)        // Returns perceptual luma
luminance(@color)   // Returns relative luminance

색상 블렌딩 및 조정

fade(@color, 50%)      // Set opacity to 50%
fadein(@color, 10%)    // Increase opacity by 10%
fadeout(@color, 10%)   // Decrease opacity by 10%
spin(@color, 30)       // Rotate hue angle by 30 degrees
mix(@color1, @color2, 50%) // Blend two colors evenly

---

Mixin 가드 및 조건문

Less는 when 키워드를 사용하여 믹스인에 조건부 로직을 적용합니다:

// 명도 가드 조건
.theme-box when (luma(@color) > 50%) {
  color: #000;
  background-color: @color;
}

// 부정 연산 가드 조건
.theme-box when (not (luma(@color) > 50%)) {
  color: #fff;
  background-color: @color;
}

// 기본 폴백 가드 조건
.theme-box when (default()) {
  border: 1px solid #ccc;
}

// 동등 비교 가드 조건
.shape when (e(@shape) = 'circle') {
  border-radius: 50%;
}

---

참고 문서

• Less.js Official Documentation
• Less Function Reference