요약 설명SCSS 파일은
.scss확장자를 사용하며, 프로젝트 규모가 커질수록 여러 파일로 나누어 관리하는 것이 중요합니다.
파셜(Partials) 파일은_로 시작하는 네이밍 규칙을 따르며, 직접 컴파일되지 않고 다른 파일에서 불러와 사용됩니다.이 페이지에서는 SCSS 파일의 확장자 종류, 파일 구조와 네이밍 규칙, 파셜 파일의 역할, 그리고 실제 프로젝트에서 어떻게 파일을 구성하는지 단계별로 살펴봅니다.
SCSS 파일은 확장자로 파일 종류를 구분합니다. 같은 Sass 언어이지만 문법 형식이 다르기 때문에 확장자도 다릅니다.
어떤 확장자를 쓰느냐에 따라 코드를 읽는 방식과 팀에서 합의해야 할 규칙이 달라지기 때문에, 기본 개념을 먼저 이해해 두면 이후 설정과 협업이 훨씬 수월해집니다.
.scss는 가장 널리 사용되는 SCSS 파일 확장자입니다.
일반 CSS와 거의 동일한 문법을 사용하므로, 기존 CSS 파일을 .scss로 바꾸면 바로 SCSS 파일로 사용할 수 있습니다.
위 예시처럼 .scss 파일은 중괄호와 세미콜론을 사용하며, CSS와 동일한 구조로 작성합니다.
변수, 중첩, 믹스인 등 SCSS 기능을 추가해도 기본 구조는 CSS와 같아서 기존 CSS 지식을 그대로 활용할 수 있습니다.
.sass는 인덴트(들여쓰기) 문법을 사용하는 Sass 파일입니다.
중괄호와 세미콜론 없이 들여쓰기만으로 블록을 구분하므로, 문법이 다소 생소할 수 있습니다.
.sass 파일은 들여쓰기에 매우 민감하며, 탭과 스페이스가 섞이면 에러가 발생할 수 있습니다.
실무에서는 CSS와 가장 유사한 .scss 형식을 주로 사용하므로, 본 커리큘럼에서도 .scss를 기준으로 설명합니다.
프로젝트에서 어떤 확장자를 사용할지 결정할 때는 다음을 고려하세요.
.scss
CSS와 동일한 문법, 중괄호·세미콜론 사용, 기존 CSS 코드 재사용 용이
대부분의 프로젝트, CSS에서 전환하는 경우, 팀 협업 시
.sass
인덴트 문법, 중괄호·세미콜론 없음, 코드가 더 간결함
Python/Ruby 개발자에게 친숙, 코드 간결성을 중시하는 경우
초보자이거나 팀 프로젝트라면 .scss를 선택하는 것을 권장합니다.
CSS 지식이 있다면 바로 시작할 수 있고, 팀원들도 쉽게 이해할 수 있어 협업이 원활합니다.
프로젝트 규모가 커질수록 SCSS 파일을 체계적으로 구성하는 것이 중요합니다.
파일 구조와 네이밍 규칙을 일관되게 유지하면, 코드를 찾고 수정하는 시간을 크게 줄일 수 있습니다.
일반 SCSS 파일은 직접 컴파일되어 CSS 파일로 변환됩니다.
파일명은 소문자와 하이픈(-)을 사용하는 것이 일반적이며, 의미 있는 이름을 붙입니다.
일반적으로 프로젝트의 진입점이 되는 메인 파일은 main.scss 또는 style.scss로 명명합니다.
이 파일에서 다른 파셜 파일들을 불러와 최종 CSS로 컴파일합니다.
파셜 파일은 언더스코어(_)로 시작하는 파일명을 사용하며, 직접 컴파일되지 않습니다.
다른 SCSS 파일에서 @use 또는 @import로 불러와 사용합니다.
파셜 파일의 _ 접두사는 "이 파일은 단독으로 컴파일하지 않는다"는 의미입니다.
불러올 때는 _와 확장자를 생략하고 파일명만 사용합니다.
일관된 네이밍 규칙을 따르면 파일을 빠르게 찾고 이해할 수 있습니다.
소문자 사용
파일명은 소문자로 작성하여 운영체제 간 호환성을 높입니다
button.scss (O), Button.scss (X)
하이픈(-) 사용
단어 구분은 하이픈을 사용하며, 언더스코어는 파셜 접두사에만 사용
button-group.scss (O), button_group.scss (X)
의미 있는 이름
파일 내용을 바로 알 수 있도록 명확한 이름을 사용
primary-button.scss (O), btn1.scss (X)
파셜 접두사
파셜 파일은 반드시 _로 시작
_variables.scss (O), variables.scss (일반 파일)
실제 프로젝트에서 SCSS 파일을 어떻게 구성하는지 폴더 구조와 함께 살펴봅니다.
작은 프로젝트부터 중간 규모, 대규모까지 여러 예시를 비교해 보면서, 내가 진행하는 프로젝트에 어떤 구조가 어울리는지 감을 잡을 수 있도록 구성했습니다.
작은 프로젝트에서는 모든 SCSS 파일을 하나의 폴더에 모아두는 것도 충분합니다.
프로젝트가 커지면 기능별로 폴더를 나누어 관리하는 것이 좋습니다.
대규모 프로젝트에서는 더 세분화된 폴더 구조를 사용할 수 있습니다.
대규모 프로젝트에서는 컴포넌트를 하위 폴더로 더 세분화하고, 페이지별 스타일이나 테마 파일도 별도로 관리합니다.
이렇게 구성하면 수백 개의 파일이 있어도 필요한 부분을 빠르게 찾을 수 있습니다.
효율적인 SCSS 파일 구조를 만들기 위한 실용적인 가이드라인을 정리합니다.
앞에서 본 예시 구조들을 그대로 복사해 쓰는 것보다는, 이 섹션의 팁을 참고해 팀 규모와 프로젝트 특성에 맞게 구조를 조정하는 것이 중요합니다.
_로 시작" 같은 규칙을 정하면 됩니다.
main.scss 파일은 다른 파일들을 불러오는 역할만 하도록 구성합니다.
실제 스타일 코드는 각 파셜 파일에 작성하고, main.scss에서는 @use로만 연결합니다.
_button-base.scss, _button-primary.scss 등)은 components/buttons/ 폴더에 함께 둡니다.
SCSS 파일 구조와 확장자에 대해 알아본 내용을 정리합니다.
여기에서 다룬 개념들은 이후 챕터에서 SCSS 문법을 더 깊게 배울 때도 계속해서 반복해 쓰이므로, 파일을 어떻게 나누고 이름을 붙일지 한 번쯤은 자신만의 기준을 정리해 두면 좋습니다.
.scss는 CSS와 유사한 문법, .sass는 인덴트 문법. 실무에서는 주로 .scss 사용_로 시작하며 직접 컴파일되지 않음. 다른 파일에서 @use로 불러와 사용다음 페이지에서는 SCSS 파일이 어떻게 CSS로 컴파일되는지, 그리고 컴파일 과정에서 어떤 일이 일어나는지 자세히 살펴봅니다.