[SCSS] SCSS 문법4 - 연산자

Bam·2022년 5월 6일
0

CSS

목록 보기
25/34
post-thumbnail

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; => #888888

rgba 색상 표기 연산의 주의점

타입을 다루면서 색상에는 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가 다르면 연산 오류! */

0개의 댓글