반응형
안녕하세요 😊
이번 글에서는 실무에서 가장 많이 쓰는 SCSS 핵심 문법 6가지를 한 번에 정리해보겠습니다.
예제 위주로 설명드리니, 그대로 복붙해서 사용하셔도 됩니다!
1) 변수(Variables) – 테마/반복 값 관리에 필수
$primary: #1abc9c;
$radius: 12px;
.button {
background: $primary;
border-radius: $radius;
}
- 색상, 간격, 라운드 값 등 재사용 값을 한 곳에서 관리할 수 있어 유지보수가 쉬워집니다.
2) 중첩(Nesting) – 구조가 보이는 SCSS
.card {
padding: 16px;
.title { font-weight: 700; }
.desc { color: #666; }
&:hover { box-shadow: 0 6px 16px rgba(0,0,0,.08); }
}
- HTML 구조대로 스타일을 계층적으로 작성 가능
- 과한 중첩(3~4단계 이상)은 피하고 BEM과 함께 쓰면 깔끔합니다.
3) & 연산자 – 상태/변형 한 곳에서 관리
.btn {
&--primary { background: #1abc9c; color: #fff; }
&--ghost { background: transparent; border: 1px solid #1abc9c; }
&:disabled { opacity: .5; cursor: not-allowed; }
&:hover { transform: translateY(-1px); }
}
- 현재 선택자를 참조하여 modifier, state를 간결하게 정의합니다.
4) 믹스인 & 인클루드(@mixin / @include) – 반복 패턴 캡슐화
@mixin flex-center($gap: 0) {
display: flex;
align-items: center;
justify-content: center;
gap: $gap;
}
.box { @include flex-center(8px); }
- 레이아웃·반응형·타이포 등 반복 스타일 패턴을 재사용 가능
- 인자(파라미터)로 유연하게 변형할 수 있어 실무 효율 ↑
5) 함수(Functions) – 계산/색상 조합 자동화
@function rem($px, $base: 16) {
@return ($px / $base) * 1rem;
}
.title { font-size: rem(20); } // 1.25rem
- 수치 변환, 컬러 조합(lighten, darken, mix) 등 계산 로직을 함수로 통일하면 코드 일관성이 좋아집니다.
6) 모듈 시스템(@use / @forward) – 최신 권장 방식
더 이상 @import 대신 **@use**를 사용하세요. 네임스페이스로 충돌을 방지합니다.
// _variables.scss
$primary: #1abc9c;
$space: 8px;
// _mixins.scss
@mixin clickable { cursor: pointer; user-select: none; }
// styles.scss
@use "variables" as v;
@use "mixins";
.button {
background: v.$primary;
margin: v.$space;
@include mixins.clickable;
}
- @forward는 모듈을 재 export할 때 사용합니다(설정 집약 파일 만들 때 유용).
보너스) 반응형 믹스인 패턴 – 한 줄로 미디어쿼리
// _breakpoints.scss
$bp: (
sm: 480px,
md: 768px,
lg: 1024px
);
@mixin up($key) {
@media (min-width: map-get($bp, $key)) {
@content;
}
}
// 사용
.card {
padding: 12px;
@include up(md) { padding: 20px; }
@include up(lg) { padding: 24px; }
}
- 브레이크포인트 맵 + 믹스인으로 반응형을 표준화하면 팀 작업이 편해집니다.
실무 체크리스트
- 공통 값은 변수로 중앙관리
- 중첩은 3단계 이내로 유지
- 상태/모디파이어는 & 패턴으로 일관되게
- 반복 패턴은 @mixin으로 캡슐화
- 수치 변환은 @function으로 통일
- 모듈은 @use/@forward로 최신 방식 적용
✅ 마무리
SCSS는 “가독성 높은 구조 + 재사용성 + 유지보수성”을 동시에 잡을 수 있는 강력한 전처리기입니다.
위 6가지만 익혀도 스타일링 속도와 품질이 눈에 띄게 달라집니다.
프로젝트에 바로 적용해 보시고, 팀 규칙으로 정리해보세요! 😊
반응형
'HTML, CSS' 카테고리의 다른 글
HTML5 <section> vs <article> 차이와 활용법 – 구조를 잡는 웹표준 태그 가이드 (4) | 2025.08.15 |
---|---|
HTML5 <dialog> 태그로 팝업 만들기 – JavaScript 없이 모달창 구현하는 방법 (2) | 2025.08.11 |
HTML5 <details> 태그로 클릭 시 열리는 아코디언 만들기 – JavaScript 없이 구현하는 팁 (3) | 2025.08.09 |
스크립트 없이도 가능! CSS만으로 애니메이션 효과 주는 5가지 방법 (2) | 2025.08.06 |
실제 UI를 따라 만들며 배우는 CSS 구조 복습 (0) | 2025.07.01 |