[Sass/SCSS] 5. Sass/SCSS의 연산

(1) 연산(Operations)

Sass는 기본적인 연산 기능을 지원하므로 default value를 기준으로 계산할 시 유용하게 사용할 수 있습니다.

 

산술 연산자

연산자	설명	참고
+	더하기
-	빼기
*	곱하기	하나 이상의 값이 반드시 Number
/	나누기	오른쪽 값은 반드시 Number
%	나머지

 

비교 연산자

연산자	설명
==	동등
!=	부등
<	보다 작다
>	보다 크다
<=	보다 작거나 같다
>=	보다 크거나 같다

 

논리 연산자

연산자	설명
and	그리고
or	또는
not	부정

 

(2) 숫자 (Number)

① 상대적 단위 연산

보통은 px 단위를 사용하여 연산하지만, 상대적 단위의 연산일 경우 CSS의 calc()를 사용하여 연산합니다.

width: 100% - 20px; //error 단위 모순
width: calc(100% - 20px); //이렇게 사용해야 함.

 

②주의사항

CSS에서는 속성값 분리를 위해 /를 사용하기도 하므로, 나누기 연산이 되지 않고 그대로 Compile되는 경우가 있음.

/를 나누기 연산 기능으로 사용하기 위해서는 다음과 같은 조건을 충족해야 함.

 

- 값 또는 그 일부가 변수에 저장되거나 함수에 의해 반환될 때

- 값이 ()로 묶여있을 때

- 값이 다른 산술 표현식의 일부로 사용될 때

 

if (SCSS) {

div {
	$x: 100px;
    width: $x / 2; //변수에 저장된 값을 나누기
    height: (100px / 2); //괄호로 묶은 경우
    font-size: 10px + 15px / 3; //더하기와 함께 사용
}

} else if (SCSS to CSS) {

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

}

 

(3) 문자 (String)

문자 연산에는 + 를 사용할 수 있습니다.

첫 번째의 피연산자를 기준으로 하므로 만약 첫 번째의 피연산자에 따옴표가 붙어있다면 결과도 따옴표로 묶이고,

아니라면 결과 또한 따옴표가 없습니다.

if (SCSS) {

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

} else if (SCSS to CSS) {

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

}

 

(4) 색상 (Colors)

if (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는 같아야 한다.
}

} else if (SCSS to CSS) {

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

}

 

RGBA에선 Alpha값이 연산되지 않으므로 서로 동일해야 rgb의 연산이 가능합니다.

만약, Alpha 값 또한 연산하길 원한다면 opacify(), transparentize() 색상 함수를 사용하여 바꿔주어야 합니다.

 

if (SCSS) {

$color: rgba(0, 0, 0, .5);
div {
  color: opacify($color, .3);  // 30% 더 불투명하게 = .8
  background-color: transparentize($color, .3);  // 20% 더 투명하게 = .2
}

} else if (SCSS to CSS) {

div {
  color: rgba(0, 0, 0, 0.8);
  background-color: rgba(0, 0, 0, 0.2);
}

}

 

(5) 논리 (Boolean)

@if 조건문을 사용한 논리 연산, and, or, not을 사용하여 javascript의 &&, ||, ! 과 같은 기능을 합니다.

 

if (SCSS) {

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

} else if (SCSS to CSS) {

div {
  height: 500px;
}

}