SCSS 연산자
SCSS는 연산을 위한 연산자들을 지원하고 있습니다. SCSS 타입이 지원하는 값이라면 연산자를 통한 연산으로 다양한 값을 표현할 수 있습니다. 연산자의 종류와 사용가능한 타입들은 아래표와 같습니다.
SCSS를 다루실 정도라면 연산자의 의미정도는 아실거라고 생각되어 연산자 개별 개체에 대한 설명은 달지 않겠습니다.
| 연산자 | 설명 |
|---|---|
| ==, != | 두 값이 같은지 아닌지 체크하는데 사용됩니다. |
+, -, *, /, % | 숫자 타입에 대해 연산을 수행하는데 사용됩니다. |
| <, <=, >, >= | 값을 비교하는데 사용됩니다. |
| and, or, not | 논리 연산입니다. and는 그리고, or는 또는, not은 부정을 의미합니다. |
| +, -, / | 문자열을 가공하는데 사용됩니다. |
SCSS에서 사용되는 연산자들은 위에서 소개한 것이 전부입니다. 지금부터는 각 연산에서 나타나는 몇 가지 주의점들을 소개해드리겠습니다.
숫자 연산의 주의점
연산은 px로 수행한다
숫자값 연산에서 일반적으로 절대적인 단위인 px를 통해 수행합니다. 하지만 최근 웹/앱에서는 뷰포트/화면에 상대적인 rem, em, vw의 단위나 %를 사용하는 경우가 많습니다. 따라서 이러한 단위들에 대해 연산을 수행하고 싶은 경우 CSS의 calc() 함수를 이용합니다.
width: 150px - 20px;
width: calc(100% - 10rem);
/* width: 100% - 10rem 과 같은 코드는 오류! *// 연산자는 주의해서 사용해야한다
CSS는 숫자를 분리해서 표현하려고 할 때 /를 이용해서 표현하는 방식을 허용하고 있습니다. 그래서 때에 따라서 /가 나누기 연산자가 아닌 숫자 표현으로 컴파일 될 수 있음을 주의해야합니다.
다음 상황은 / 연산자가 연산자로 사용되기 위한 조건들입니다.
- 피연산자가 변수에 저장되거나 함수에서 반환될 때
- 연산자와 피연산자가 ()로 묶이는 경우
- 다른 산술 연산과 함께 사용되는 경우
width: $num / 1;
width: (20 / 1);
width: 5 + 15 / 1;문자열 연산의 주의점
+ 연산자의 주의점
문자열 연산할 때 + 연산자는 왼쪽 피연산자에 따라 다른 결과를 보입니다. 왼쪽 피연산자에 "가 있다면 "가 포함된 문자열으로, "가 없다면 "가 포함되지 않은 문자열로 연산해줍니다.
$str1: "Hello " + SCSS; => "Hello SCSS"
$str2: Hello + "SCSS"; => Hello SCSS단항 연산자 -, /
-와 / 연산자는 단항 연산자로 사용되어질 수 있습니다. 그래서 -나 /로 시작하는 문자열은 맨 앞에 해당 연산자를 포함한 문자열을 반환하게 됩니다.
$str1: / hello; => /hello
$str2: - hi; => -hi색상 연산
SCSS는 색상값도 연산이 가능합니다.
$what-color: #444444 + #444444; => #888888rgba 색상 표기 연산의 주의점
타입을 다루면서 색상에는 rgba도 다룬다고 언급을 했었는데요. 여기도 주의점이 있습니다.
가장 마지막에 오는 a, Alpha(투명도)값은 연산되지 않습니다. 그리고 이 값은 서로 동일해야 연산이 가능합니다.
$what-color: rgba(20, 20, 20, 0.1) + rgba(30, 30, 30, 0.1);
=(result)=> rgba(50, 50, 50, 0.1)
/* 두 피연산자의 alpha가 다르면 연산 오류! */