Sass에서의 계산식 정리

 

1. 일반적인 수학식으로 계산하기 가능

- percentage로 변환하기
$size : 100 * 1%  // 100%

- 일반적인 계산
$size : 100 - 3 * 5 // 90

- pixel 계산
$size : 100 * 2px // 200px

 

 

2. 같은단위의 계산식

A. 단위가 같더라도 sass 에서는 곱하기 '*' 와 나누기 '/' 연산은 되지 않는다.

$size : 100px * 3px
- 위와같은 경우 숫자를 먼저 계산후 단위를 문자열로 이어붙인다.
- 결과값 : 300px*px

$size : 100px / 3
- 에러

 

 

B. 더하기 '+' 와 빼기 '-'는 정상으로 연산이 가능하다.

$size : 100px - 20px
- 결과값 : 80px

$size : 100px + 20px
- 결과값 : 120px

 

 

 

3. 다른단위의 계산식

sass에서는 다른단위의 계산을 수행할 수 없다. 특히 상대적인 크기는 브라우저가 계산하는 것이므로, sass에서는 이를 이해할 수 없기 때문이다. 이때에는 calc() 함수를 사용하자.

calc()함수는 css 함수이기 때문에, 이 안에 sass 변수를 사용할때에는 문자보간 #{변수명} 을 이용하도록 하자.

$gap : 80px;
$size : calc( 100% / 3 - #{$gap} );

@debug $size;
- 결과값 : calc(33.3333333333% - 80px)

 

 

4. Sass의 Built-in-module 사용하기

@use 'sass:math';

올림 : math.ceil($number)
최소 또는 최대로 가까운 수 : math.clamp($min, $number, $max) //=> number
내림 : math.floor($number)

 

 

 

A. 올림 math.ceil($number)

math.ceil(4) // 4
math.ceil(4.2) // 5
math.ceil(4.9) // 5

 

B. 클램프 math.clamp($min, $number, $max) //=> number

최소 또는 최대수로 지정된 값 출력.

$number를 $min에서 $max 사이의 범위로 제한합니다. $number가 $min보다 작으면 $min이 반환되고 $max보다 크면 $max가 반환됩니다.

$min, $number 및 $max에 호환되는 단위가 있거나 모두 단위여야 합니다

@debug math.clamp(-1, 0, 1); // 0
@debug math.clamp(1px, -1px, 10px); // 1px
@debug math.clamp(-1in, 1cm, 10mm); // 10mm

 

 

C. 내림 math.floor($number)

@debug math.floor(-1) ; // -1
@debug math.floor(-1.2) / // -2
@debug math.floor(4); // 4
@debug math.floor(4.2); // 4
@debug math.floor(4.9); // 4

 

그외, 반올림, 절대값, 최대값, 최소값 등 수학적 메소드들이 존재한다.

아래의 링크를 참조해 보자.

 

https://sass-lang.com/documentation/modules/math/

Sass: sass:math