FSCSS 1.1.6 업데이트 요약

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

CSS/웹 개발자, 프론트엔드 엔지니어 (중급~고급)

핵심 요약

• re() 및 copy() 메서드 도입으로 CSS 규칙 재사용성 향상
• re(search, replace)를 통해 문자 기반 빠른 스타일 변환
• copy(length, target)으로 색상, 문자열, 속성 값 복사 및 변수 저장
• 동적 변수 주입으로 유지보수성 극대화

섹션별 세부 요약

1. 새로운 기능

• re(search, replace) 메서드
• re(dot,"rpt(3,'.')")를 통해 dot 키워드를 반복 문자열로 대체
• re(blood-color: '#a00 copy(4, var-red)')로 변수 저장
• copy(length, target) 메서드
• copy(4, var-red)로 색상 코드 #a00을 CSS 변수에 저장
• copy(7, dogblack)으로 HEX 색상 값을 색상 지도에 할당

2. 예제 코드

• FSCSS 문법 적용 예시

```fscss

re(bodyBaseStyle, "color: skyblue; border: 2px solid #000;")

$mx-gradient: $dogblack! 55% 77% mx(,111 10% 30%,222 20% 50%,333 40% 70%,444 60% 90%,555 80% 100%,",#fff");

```

• 동적 변수 주입 적용

```css

body {

bodyBaseStyle

background: linear-gradient(70deg, $mx-gradient!);

}

h3:before {

content: "dot dot dot";

color: blood-color;

background: #110110 copy(7, dogblack);

}

```

3. `copy()` 및 `re()` 사용 이유

• 반복된 CSS 코드 최소화
• 조건식/변수 기반 스타일 논리 구현
• 동적 변수 주입을 통한 유지보수성 향상

결론

• re()와 copy()를 사용해 CSS 중복 제거 및 변수 기반 스타일 관리 가능