Sass[SCSS] 기초 이론 4 - scss에서 연산자 사용하기 (Operations & calc)

Sass[Scss]

 

Sass[SCSS] 기초 4 - scss에서 연산자 사용하기 (Operations & calc) 를 해보도록 할게요

이거는 뭐 어려운게 없어서 간단하게 정리하겠습니다. :)

 

보통 css 에서는 연산자를 사용할때 calc()를 이용해서 사용하는데 scss에서는 똑같이 calc()를 사용해도 되고 사용하지 않아도 컴파일되면서 계산된 값이 잘 적용됩니다.

특이사항은 나누기를 할때는 괄호를 이용해줘야 하는데 괄호를 넣지 않으면 컴파일 될 때 그냥 20px / 2 이렇게 그대로 컴파일됩니다.

그 외에 다른 특이사항은 아래 코드에 예시와 주석으로 적어놓았습니다. :)

 

/* style.scss */
$font-size: 15px;
$box-padding: 20px;

.box {
  margin: 20px + 10px; /* calc()가 필요없음 */
  margin-top: (20px / 2); /* 나누기 할때는 괄호 필요 */
  padding: $box-padding / 2; /* 변수는 괜찮음 */
  border: $font-size / 2 solid #ddd; /* 이런식으로도 사용가능 */
  font-size: calc(15px * 2); /* css처럼 calc()를 사용해도 문제없음 */
  width: calc(20% - 20px); /* 상대적 단위(%, em, vw 등)의 연산의 경우 calc()를 사용해야함 */
}

/* 컴파일된 style.css */
.box {
  margin: 30px; /* calc()가 필요없음 */
  margin-top: 10px; /* 나누기 할때는 괄호 필요 */
  padding: 10px; /* 변수는 괜찮음 */
  border: 7.5px solid #ddd; /* 이런식으로도 사용가능 */
  font-size: 30px; /* css처럼 calc()를 사용해도 문제없음 */
  width: calc(20% - 20px); /* 상대적 단위(%, em, vw 등)의 연산의 경우 calc()를 사용해야함 */
}