[SCSS] SCSS 3 / SCSS 데이터 타입과 연산

SCSS 데이터 타입

타입	예시	특징
Number	16px, 2rem, 45deg	단위 가능, 수학 연산 가능
String	"Hello", 'Noto Sans'	연결 가능, CSS 속성에 사용 가능
Color	#fff, rgba(0,0,0,0.5)	색상 함수 사용 가능, 연산 가능
Boolean	true, false	조건문에 사용
List	red, green, blue, 5px 10px	nth() 접근, 리스트 합치기 가능
Map	(primary: #fff, secondary: #000)	map-get(), 반복문과 사용 가능
Null	null	값 없음, 조건문에서 유용

1. 숫자(Number)

• 수치 값으로, 단위가 있을 수도 있고 없을 수도 있음.
• 예시 단위: px, em, rem, %, deg 등
• SCSS에서는 숫자끼리 연산 가능 (+, -, *, /)
• 단위가 같은 경우 연산 가능, 다른 단위는 주의 필요.
• % 같은 상대 단위도 숫자로 취급 가능, 계산할 때 유용.

$base-font-size: 16px;
$spacing: 1.5rem;
$rotation: 45deg;

숫자 연산 (Number Operations)

• 숫자는 SCSS에서 산술 연산이 가능.
• 단위가 있는 숫자도 계산할 수 있고, 없는 숫자끼리는 자유롭게 연산 가능
• 산술 연산자 : +, -, * , /, %
• 단위 계산: 같은 단위끼리 계산 가능, 다른 단위는 조심!
• 나누기 (/): CSS 속성에서 나누기로 사용될 때와 SCSS 계산용 /를 혼동하지 말 것.
  • 예: width: 100% / 3; → SCSS는 계산 수행, CSS에선 그대로 / 3로 나감.
  • SCSS 계산을 명확히 하려면 괄호 사용: width: (100% / 3);
  • CSS에서 새로운 문법으로 해석될 수 있으니 SCSS 1.33 이상에서는 math.div()를 권장

$base-size: 16px;
$double-size: $base-size * 2;   // 32px
$half-size: $base-size / 2;     // 8px
$sum: $base-size + 4px;         // 20px
$diff: $base-size - 2px;        // 14px
$mod: 10 % 3;                   // 1


/* / 연산 */
@use 'sass:math';

$half: math.div(100px, 2); // 50px

---

2. 문자열(String)

• 텍스트 데이터를 저장하는 타입
• 문자열 구분: 큰따옴표 " " 또는 작은따옴표 ' ' 사용 가능
• 변수 안에 문자열을 담아서 CSS 속성에 직접 사용 가능
• 문자열끼리 연결 가능 (#{} 또는 +)

$font-family: "Noto Sans", sans-serif;
$content: 'Hello, SCSS!';

$theme: "dark";
content: "theme-" + $theme; // theme-dark

문자열 연산 (String Operations)

• 문자열끼리 연결(concatenation) 가능.
• CSS 속성 값에도 바로 사용 가능
• #{} 인터폴레이션과 결합하면 변수와 문자열을 혼합 가능

연산	설명
#{}	문자열 보간 (interpolation)
+	문자열 결합 (SCSS 3.5+에서 가능)

$theme: "dark";
$class: "btn-" + $theme; // "btn-dark"

$selector: ".icon-" + "small"; // ".icon-small"

/* 문자열 + 변수 */
$size: 16px;
width: #{$size * 2}; // 32px

---

3. 색상(Color)

• CSS 색상값을 변수로 관리 가능
• 형식: HEX, RGB(A), HSL(A)
• SCSS에서 색상 관련 함수 사용 가능: lighten(), darken(), mix()
• 계산과 비교도 가능 (예: $color1 == $color2)

$primary-color: #3498db;
$secondary-color: rgba(255, 0, 0, 0.5);
$accent-color: hsl(120, 100%, 50%);

 

색상 연산 (Color Operations)

• 기본 색상 연산:
  • +, - → 색상값끼리 밝기 변화
  • *, / → 색상값과 숫자 결합 (비율 조정)

• 색상과 숫자를 연산할 때는 %를 많이 사용
• lighten()/darken()로 테마 색상을 쉽게 변형 가능

함수	셜명
lighten($color, $amount)	색상을 밝게
darken($color, $amount)	색상을 어둡게
adjust-hue($color, $degrees)	색상 각도 변경
mix($color1, $color2, $weight)	두 색상을 섞음
rgba($color, $alpha)	투명도 조절

$primary: #3498db;
$light: lighten($primary, 20%);  // 밝게
$dark: darken($primary, 20%);    // 어둡게
$mix: mix(#ff0000, #0000ff, 50%); // 빨강 + 파랑 → 보라

$primary: #ff0000;

.btn {
  background-color: lighten($primary, 20%); // 더 밝게
  border-color: darken($primary, 10%);    // 더 어둡게
}

---

4. 불리언(Boolean)

• true 또는 false 두 가지 값만 가짐
• 조건문과 함께 많이 사용됨

$is-responsive: true;
$use-grid: false;

@if $is-responsive {
  font-size: 1.2rem;
}

---

5. 리스트(List)

• 여러 값을 하나의 변수로 묶어서 관리
• 구분: 공백( ) 또는 쉼표(,)로 구분

$colors: red, green, blue; // 쉼표 리스트
$spacing: 5px 10px 15px;   // 공백 리스트

[SCSS] SCSS / SCSS 리스트(List)

---

6. 맵(Map)

• 키와 값의 쌍으로 이루어진 컬렉션
• map-get($map, $key)로 값 접근 가능

---

7. null

• 값이 없음을 의미
• 다른 값과 연산 불가
• 조건문에서 존재 여부 확인 가능

$padding: null;

@if $padding != null {
  padding: $padding;
}

---

SCSS 연산

연산	예시	특징
수학 연산	+, -, *, /, %	숫자, 단위 계산
색상 연산	lighten($color, 20%), mix()	색상 조정, 혼합
문자열 연산	"btn-" + $theme, #{}	문자열 연결, CSS 적용 가능
리스트 연산	join(), nth(), length()	리스트 합치기, 값 접근
맵 연산	map-get(), map-merge()	값 접근, 맵 병합
비교 연산	==, !=, >, <	조건문에서 활용
논리 연산	and, or, not	조건 조합

비교 연산 (Comparison Operations)

• 값을 비교해서 조건문에 활용 가능
• 연산자: ==, !=, >, <, >=, <=

$size: 16px;

@if $size > 10px {
  font-size: 1.2rem;
}

@if $size == 16px {
  color: blue;
}

---

논리 연산 (Logical Operations)

• 조건을 조합할 때 사용 가능
  연산자: and, or, not

$is-responsive: true;
$is-mobile: false;

@if $is-responsive and not $is-mobile {
  display: block;
}