FSCSS 변수 대체 연산자 (||)

Source: Dev.to

Variable Fallback Operator

FSCSS v1.1.13은 새로운 기능인 Variable Fallback Operator를 도입했습니다. 이제 변수 선언 안에 직접 기본값을 정의할 수 있습니다:

property: $/variable || fallback;

FSCSS는 다음 순서대로 값을 해결합니다:

1. 변수가 존재하면 → 사용한다
2. 그렇지 않으면 → 폴백 값을 사용한다

Example

Component Definition

str(Button#1, "
background: $/bg || #06f;
color: $/color || #fff;
border: $/border || 2px solid;
padding: 10px;
border-radius: 20px;
")

Usage

.btn {
  $bg: linear-gradient(40deg, #aaf, #000);
  $color: #020;
  Button#1
}

변수가 제공되지 않으면, FSCSS가 자동으로 폴백을 적용합니다.

Why This Matters

폴백 연산자는 컴포넌트를 다음과 같이 만들어요:

• 재사용성 향상
• 기본적으로 더 안전함
• 유지보수가 더 깔끔함
• 플러그인 친화적

플러그인 제작자는 사용자가 모든 변수를 정의하지 않아도 동작하는 컴포넌트를 제공할 수 있습니다.

Required Variables

여전히 엄격한 변수를 강제할 수 있습니다. $bg!가 필수로 표시되었는데 없을 경우, FSCSS가 해당 사항을 경고합니다.

---

https://fscss.devtem.org/