SASS에서의 수학 연산

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

예제

두 값을 더합니다:

p {
	font-size: 5px + 10px;
}

컴파일 결과:

p {
	font-size: 15px;
}

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

p {
	font-size: 25px - 10px;
}

컴파일 결과:

p {
	font-size: 15px;
}

값에 숫자를 곱합니다:

p {
	font-size: 5px * 5;
}

컴파일 결과:

p {
	font-size: 25px;
}

값을 숫자로 나눕니다:

div {
	width: 100% / 3;
}

컴파일 결과:

div {
	width: 33.33333333%;
}

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

$var: 100px;

div {
	width: $var + 100px;
}

컴파일 결과:

div {
	width: 200px;
}

두 변수를 더합니다:

$var1: 100px;
$var2: 200px;

div {
	width: $var1 + $var2;
}

컴파일 결과:

div {
	width: 300px;
}

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

div {
	width: 100% - 10px;
}

컴파일 결과:

div {
	width: 90%;
}

다음 코드의 컴파일 결과는 어떻게 될지 설명하세요:

#block {
	width: 100px * 2;
}

다음 코드의 컴파일 결과는 어떻게 될지 설명하세요:

#block {
	width: 200px / 3;
}

다음 코드의 컴파일 결과는 어떻게 될지 설명하세요:

$var1: 500px;
$var2: 5;

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