SCSS 기본 연산

2020-08-22

HTML & CSS / Sass & SCSS

Sass는 기본적으로 연산 기능을 지원하며, 레이아웃 작업시 상황에 맞게 크기를 계산하거나 정해진 값을 나눠서 작업할 경우 유용하게 사용할 수 있다.

산술 연산자

종류	설명
+	더하기
-	빼기
*	곱하기
/	나누기
%	나머지

하나 이상의 값이 반드시 숫자, 오른쪽값이 반드시 숫자.

비교 연산자

종류	설명
==	같다
!=	같지 않다
<	보다 작은
>	보다 큰
<=	보다 작거나 같은
>=	보다 크거나 같은

논리 연산자

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

숫자

상대적 단위 연산
- 일반적으로 절댓값을 나타내는 px 단위로 연산
- 상대적 단위(%, em, vw 등)으로 연산할 경우 CSS calc()으로 연산해야 한다.
- CSS는 속성 값의 숫자를 분리하는 방법으로 /를 허용하기 때문에 /가 나누기 연산으로 사용되지 않을 수 있다.
- /를 나누기 연산 기능으로 사용하고 싶을 때 충족해야 하는 조건
  - 값 또는 그 일부가 변수에 저장되거나 함수에 의해 반환되는 경우
  - 값이 ()로 묶여있는 경우
  - 값이 다른 산술 표현식의 일부로 사용되는 경우

SCSS

div {
  $x: 100px;
  width: $x / 2;  // 변수에 저장된 값을 나누기
  height: (100px / 2);  // 괄호로 묶어서 나누기
  font-size: 10px + 12px / 3;  // 더하기 연산과 같이 사용
}

Compiled to CSS

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

문자 (Strings)

문자 연산에는 +가 사용.
연산 결과는 첫번째 피연산자를 기준으로 함.
첫번째 피연산자에 따옴표가 붙어 있다면 연산 결과를 따옴표로 묶는다. (반대의 경우 붙이지 않음.)

SCSS

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

Compiled to CSS

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

색상(Colors)

RGBA에서 Alpha 값은 연산되지 않는다.
Alpha 값을 연산하기 위한 색상 함수(Color Functions)
- opacify()
- transparentize()

SCSS

div {
  color: #123456 + #345678;
  background: rgba(50, 100, 150, .5) + rgba(10, 20, 30, .5);
}

Compiled to CSS

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

논리(Boolean)

@if 조건문에서 사용되는 논리 연산. 그리고 / 또는 / 부정이 있다.

종류	설명
and	그리고
or	또는
not	부정(반대)

SASS

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

Compiled to CSS

1
2
3

div {
  height: 300px;
}

REFERENCE
https://heropy.blog/2018/01/31/sass/