[basic] LESS - Operations (연산)

Operations (연산)

 

1. 

사칙연산 (예: +, -, *, /)은 (숫자, 색깔, 변수) 등에 사용 가능.

 

2. 

수학적인 연산을 할 땐 단위에 주의.

 

3. 

사칙연산 및 비교 전 숫자로 변환됨. 

(가장 왼쪽에 명시된 단위 기준)

 

4. 

(변환 불가능・무의미) 경우, 단위 무시. 

(예: px → cm, rad → %)

 

---

[예제]

 

// 변환 가능 경우. (가장 왼쪽 명시 단위 기준)

@ex-1: 5cm + 10mm; // 6cm

@ex-2: 2 - 3cm - 5mm; // -1.5cm

// 변환 불가 경우. (단위간 변환 불가능 경우)

@ex-3: 2 + 5px - 3cm; // 4px

// 변수 사용 경우

@a: 5%;

@b: @a * 2; // 10%

@c: @a + @b; // 15%

 

Operation (연산) 예제

 

곱셈과 나눗셈은 숫자를 변환 X. 

(∵ 대부분 경우, 의미 없음). 

(예: 길이에 길이를 곱하면 영역이나, CSS는 영역 지정 지원 X.)

따라서, Less는 숫자 그대로 연산 후, 명시된 단위를 결과에 붙임.

 

---

[예제]

 

// 예제1

@base: 2cm * 3mm; // 6cm

 

// 예제2 

@color: #224488 / 2; // #112244

background-color: #112244 + #111; // #223355

 

(∵ #111 == $111111)

PS.  Color Operation Functions (색상 연산 함수) 이용하면 더 편리.

calc() 함수 예외사항.

Released v3.0.0

 

CSS 호환 위해, calc() 함수는 수학 표현식을 평가 X.

단, 안긴 함수들에선 변수와 수학 표현식을 평가 O.

 

---

[예제]

 

@var: 50vh/2;

width: calc(50% + (@var - 20px));  // calc(50% + (25vh - 20px))