SCSS 산술 연산

SCSS 산술 연산

SCSS에서도 JavaScript에서 산술 연산자를 사용했던 것처럼 활용이 가능합니다. 더하기, 뺄셈, 곱셈, 나머지 연산자는 모두 동일한 반면 나누기 연산자는 다른 방법으로 사용하여야 합니다.

CSS 내에서 font의 단축 속성을 이용할 때에 font: 10px / 10px serif; 와 마찬가지로 / 기호를 사용하게 됩니다. 그렇기에 나누기 연산자가 SCSS에서는 활용이 불가한 것입니다.

따라서, SCSS에서 나누기 연산자를 사용하기 위해서는 첫 번째로 (30px / 2)처럼 괄호 내에 연산을 넣어 사용할 수 있습니다. 두 번째 방법은 10px + 10px / 2 와 같이 다른 산술 연산자와 함께 사용하여 / 기호가 나누기 연산자라고 인식하게 하는 방법이 있습니다. 마지막 방법으로는 전 시간에 배운 $size: 30px, $size / 2 변수를 활용하여 나누기 연산자를 사용하는 방법이 있습니다. 자세한 예는 아래에서 살펴봅시다.

1. SCSS

div {
    $size: 30px;
    width: 20px + 20px;
    height: 40px - 10px;
    font-size: 10px * 2;
    margin-top: (30px / 2);
    margin-bottom: 10px + 12px / 2;
    padding-top: $size / 2;
    padding-bottom: 20px % 7;
}

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

2. CSS(Compiled)

div {
  width: 40px;
  height: 30px;
  font-size: 20px;
  margin-top: 15px;
  margin-bottom: 16px;
  padding-top: 15px;
  padding-bottom: 6px;
}

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