[Sass문법 정리] 4. 연산

4.6. 연산(Operation)

4.6.1. 연산자 종류

4.6.1.1. 산술연산자

종류	설명	주의사항
+	더하기
-	빼기
*	곱하기	하나의 값이 반드시 숫자 여야함 (10px * 10px 안됨)
/	나누기	오른쪽 값이 반드시 숫자 여아함(10px / 10px 안됨)
%	나머지

 

4.6.1.2. 비교연산자

종류	설명
==	이퀄
!=	낫 이퀄
<	작다
>	크다
<=	작거나 같다
>=	크거나 같다

 

4.6.1.3. 논리연산자

종류	설명
and	그리고
or	또는
not	부정

 

4.6.2. 숫자연산

일반적으로는 px단위 연산을 하지만 상대적 단위(%, em, vw등)의 연산의 경우 calc() 함수를 사용한다.

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

 

나누기 연산의 경우 css의 구분자로 사용되는 경우도 있기 때문에 따라서 나누기의 경우에는 가능하면 괄호로 묶어서 사용하는 것을 추천합니다.

//CSS로 컴파일시에 CSS의 구분자로 사용되지 않고 *반드시* 나누기로 해석되는 경우
div {
  $x: 100px;
  width: $x / 2;  // 변수에 저장된 값을 나누기
  height: (100px / 2);  // 괄호로 묶어서 나누기
  font-size: 10px + 12px / 3;  // 더하기 연산과 같이 사용
}

 

4.6.3. 문자연산

문자연산에는 +가 사용됩니다.문자 연산의 경우 “ ”의 유무는 첫번째 연산 되는 문자열 기준입니다. 첫번째 문자열에 따옴표가 있는 경우 연산 값은 따옴표 안에 감싸져서 나오게 되며, 첫번째 문자열에 따옴표가 없는 경우 문자열은 따옴표 없이 출력 됩니다.

SCSS예제

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

컴파일후 CSS

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

 

4.6.4. 색상연산

색상끼리 연산도 가능합니다.

SCSS예제

div {
  color: #123456 + #345678;
  // R: 12 + 34 = 46
  // G: 34 + 56 = 8a
  // B: 56 + 78 = ce
  background: rgba(50, 100, 150, .5) + rgba(10, 20, 30, .5);
  // R: 50 + 10 = 60
  // G: 100 + 20 = 120
  // B: 150 + 30 = 180
  // A: Alpha channels must be equal
}

컴파일후 CSS

div {
  color: #468ace;
  background: rgba(60, 120, 180, 0.5);
}

 

4.6.5. 논리 연산

SASS의 @if 조건문에서 사용됩니다. and, or, not이나 &&, ||, !대체하여 사용도 가능합니다.

예제

$width: 90px;
div {
  @if not ($width > 100px) {
    height: 300px;
  }
}