LESS의 수학 연산

LESS 언어에서는 변수와 다양한 값에 대해 수학 연산을 수행할 수 있습니다. 예제를 통해 살펴보겠습니다.

예제

두 값을 더합니다:

styles.lessp {
  font-size: 5px + 10px;
}

컴파일 결과:

styles.cssp {
  font-size: 15px;
}

예제

한 값에서 다른 값을 뺍니다:

styles.lessp {
  font-size: 25px - 10px;
}

컴파일 결과:

styles.cssp {
  font-size: 15px;
}

예제

값에 숫자를 곱합니다:

styles.lessp {
  font-size: 5px * 5;
}

컴파일 결과:

styles.cssp {
  font-size: 25px;
}

예제

값을 숫자로 나눕니다:

styles.lessdiv {
  width: 100% / 3;
}

컴파일 결과:

styles.cssdiv {
  width: 33.33333333%;
}

예제

변수의 내용에 값을 더합니다:

styles.less@var: 100px;

div {
  width: @var + 100px;
}

컴파일 결과:

styles.cssdiv {
  width: 200px;
}

예제

두 변수를 더합니다:

styles.less@var1: 100px;
@var2: 200px;

div {
  width: @var1 + @var2;
}

컴파일 결과:

styles.cssdiv {
  width: 300px;
}

예제

서로 다른 단위로 연산을 시도하면 LESS는 모든 단위를 첫 번째 단위로 변환합니다. 예시:

styles.lessdiv {
  width: 100% - 10px;
}

컴파일 결과:

styles.cssdiv {
  width: 90%;
}

실습 문제

styles.less#block {
  width: 100px * 2;
}

styles.less#block {
  width: 200px / 3;
}

styles.less@var1: 500px;
@var2: 5;

#block {
  width: @var1 / @var2;
}