TIL | SCSS Numbers(숫자)

상대적 단위 연산

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

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

⚠️나누기 연산 주의사항⚠️

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;
}