[SCSS] 💎 연산자 (Operations) 정리

Operators (연산자)

Sass 에서는 수학 연산자들을 사용 할 수 있습니다.

​

산술 연산자

+	더하기
-	빼기
*	곱하기	하나 이상의 값이 반드시 숫자(Number)
/	나누기	오른쪽 값이 반드시 숫자(Number)
%	나머지

 

비교 연산자

==	동등
!=	부등
<	대소 / 보다 작은
>	대소 / 보다 큰
<=	대소 및 동등 / 보다 작거나 같은
>=	대소 및 동등 / 보다 크거나 같은

 

논리(불린, Boolean) 연산자

and	그리고
or	또는
not	부정

---

숫자(Numbers)

 

상대적 단위 연산

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

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

 

나누기 연산의 주의사항

아래 예제를 보면 나누기 연산자만 연산 되지 않고 그대로 컴파일됩니다.

 

Sass

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

CSS

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

 

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

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

Sass

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

CSS

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

 

 

문자(Strings)

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

 

Sass

div::after {
  content: "Hello " + World;
  flex-flow: row + "-reverse" + " " + wrap
}

CSS

div::after {
  content: "Hello World";
  flex-flow: row-reverse wrap;
}

---

Reference

https://heropy.blog/2018/01/31/sass/