[SASS] 연산(Operations)

2022-08-10

SASS는 기본적인 연산 기능을 지원한다. 레이아웃 작업시 상황에 맞게 크기를 계산하거나 정해진 값을 나눠서 작성할 경우 유용하다. 아래는 SASS에서 사용 가능한 연산자 종류이다.

산술 연산자

일반적으로 절대값을 나타내는 px단위로 연산을 하지만, 상대적 단위(%, em, vw 등)의 연산의 경우 calc()로 연산 해야 한다.

width: 50% - 20px;  // 단위 모순 에러(Incompatible units error)
width: calc(50% - 20px);  // 연산 가능

나누기 연산의 주의사항 CSS는 속성 값의 숫자를 분리하는 방법으로 /를 허용하기 때문에 /가 나누기 연산으로 사용되지 않을 수 있다. 아래 예제를 보면 나누기 연산자만 연산 되지 않고 그대로 컴파일된다.

SCSS

div {
    width: 20px + 20px;  // 더하기
    height: 40px - 10px;  // 빼기
    font-size: 10px * 2;  // 곱하기
    margin: 30px / 2;  // 나누기
}

Compiled to

div {
  width: 40px;
  height: 30px;
  font-size: 20px;
  margin: 30px/2; // Error
}

따라서 /를 나누기 연산 기능으로 사용하려면 다음과 같은 조건을 충족해야 한다.

SCSS

div {
    $x: 100px;
    width: $x / 2; // 변수에 저장된 값을 나누기
    height: (100px / 2); // 괄호로 묶여있는 경우
    font-size: 10px + 12px / 3; // 더하기 연산자와 같이 사용
}

Compiled to

div {
  width: 50px;
  height: 50px;
  font-size: 14px;
}

문자 연산에는 +가 사용된다. 문자 연산의 결과는 첫번째 피연산자를 기준으로 한다. 첫번째 피연산자에 따옴표가 붙어있다면 연산 결과를 따옴표로 묶는다. 반대로 첫번째 피연산자에 따옴표가 붙어있지 않으면 연산 결과도 따옴표를 처리하지 않는다.

SCSS

div::after {
    content: "hello" + world;
}
div::after {
    content: hello + "world";
}

Compiled to

div::after {
  content: "helloworld";
}

div::after {
  content: helloworld;
}

색상도 연산이 가능하다.

SASS의 @if조건문에서 사용되는 논리 연삭에는 그리고, 또는, 부정이 있다. 자바스크립트의 &&, ||, !와 같은 기능이라 보면 된다.

SCSS

$width: 90px;
div {
  @if not ($width > 100px) {
    height: 300px;
  }
}

Compiled to

div {
  height: 300px;
}