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))
