문법 - 숫자 (상대적 단위연산, 나누기 연산의 주의사항)

상대적 단위 연산

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

calc()는 sass뿐만이 아니라 순수 css에서도 사용이 가능하다.

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

 

 

나누기 연산의 주의사항

CSS는 속성 값의 숫자를 분리하는 방법으로 "/" 를 허용하기 때문에 "/" 가 나누기 연산으로 사용되지 않을 수 있다.
예) font: 16px / 22px serif; 같은 경우 font-size: 16px와 line-height: 22px의 속성값 분리를 위해서 "/" 를 사용한다.
아래 예제를 보면 나누기 연산자만 연산 되지 않고 그대로 컴파일된다.

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

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

 

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

• 값 또는 그 일부가 변수에 저장되거나 함수에 의해 반환되는 경우
• 값이 ()로 묶여있는 경우
• 값이 다른 산술 표현식의 일부로 사용되는 경우

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

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