7. 산술연산

CSS에서는 calc()함수를 통해 연산이 가능했지만 calc()함수 없이도 SCSS에서는 사칙 연산이 가능하다. 물론 calc()함수도 사용가능하다. 

/* SCSS */
@use "sass:math";
div {
  $size: 2;
  width: 20px + 20px;
  height: 40px - 10px;
  font-size: 10px * 2;
  // margin: 30px / 2;
  margin: math.div(12px, 2);
  padding: 20px % 7;
}

span {
  font-size: 10px;
  line-height: 10px;
  font-family: serif;
  font: 10px / 10px serif;
}

div {
  // 산술 연산을 할땐 단위가 동일해야함
  // width: 100% - 200px;
  width: calc(100% - 200px);
  height: 100px;
}

/* CSS */
div {
  width: 40px;
  height: 30px;
  font-size: 20px;
  margin: 6px;
  padding: 6px;
}

span {
  font-size: 10px;
  line-height: 10px;
  font-family: serif;
  font: 10px/10px serif;
}

div {
  width: calc(100% - 200px);
  height: 100px;
}

SCSS와 CSS를 각각 비교해보면 +, -, *, %는 정상적으로 연산이 되지만 / 기호를 통한 나머지는 정상적으로 연산되지 않는다 그 이유는 CSS에서 / 기호는 font: 10px/10px serif; 이 부분처럼 앞이 font-size 뒤가 line-height임을 구분할 수 있는 단축기호로 사용되기 때문에 math라이브러리의 div()함수를 사용해야한다. 

또한 SCSS에서 단위가 다르면 연산이 불가능하기때문에 이때는 calc()함수를 사용하여야 한다.