연산(operations)

---

• Sass는 기본적인 연산 기능 지원함

종류	설명	주의사항
+	더하기
-	빼기
*	곱하기	하나 이상의 값이 반드시 숫자
/	나누기	오른쪽 값이 반드시 숫자
%	나머지

비교연산자

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

논리(불린boolean)연산자

종류	설명
and	그리고(모두 충족)
or	또는(일부 충족)
not	부정(반대)

숫자

상대적 단위 연산

• 보통 px단위로 연산을 하지만 상대적 단위(%,em,vw) 연산일 경우 CSS의 calc()로 연산해야함

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

나누기 연산 주의사항

CSS 속성 값을 구분하는 용도로 /를 사용하는 경우가 있기 때문에 나누기 연산이 안되는 경우가 있음. 따라서 /나누기 연산 기능으로 사용하려면 아래 조건을 충족해야함

• 값 또는 그 일부가 변수에 저장되거나 함수에 의해 반환되는 경우

$w: 100px;
width: $w / 2;

• 값이 ()로 묶여있는 경우

width: (100px / 2);

• 값이 다른 산술 표현식의 일부로 사용되는 경우

width: 10px + 12px / 3; (더하기 연산과 같이 사용)

문자

• 문자 연산에는 +가 사용됨.
• 문자 연산의 결과는 첫 번째 피연산자의 따옴표("")의 유무를 그대로 따라감

div::after {
content: "Hello" + world;                      = content: "Hello world"
font-flow: row + "-reverse" + " " + wrap;      = font-flow: row-reverse wrap;
}

색상

div {
color: #123456 + #345678;                                  = color: #468ace;
backgerond: rgba(50, 100, 150, .5) + rgba(10, 20, 30, .5); = background: rgba(60,120,180, 0.5);
}

• RGBA에서 Alpha값은 연산되지 않는다.
• 연산하기 위해서는 색상 함수를 사용할 수 있다.
• opacify(), transparentize()