[SCSS] 7-1 Architecture (7-1 패턴 / 폴더 구조)

sass 프로젝트를 구성하는 인기가 많고 효과적인 모듈식 방법 중 하나가 7-1 패턴이다.

실제로 sass 가이드라인에서도 이 7-1 패턴을 다루고 있다.

 

7-1이 의미하는 게 뭐냐면 7개의 폴더와 하나의 파일을 의미한다.

즉, 7개의 폴더에 속한 파일들을 단 하나의 파일을 통해서 사용한다고 생각하면 된다.

 

그래도 역시 무슨 말인지 모르겠으니, 7-1 패턴의 구조를 알아보자.

---

Project Structured in 7-1 Architecture pattern

sass/
|
|– abstracts/
|   |– _variables.scss    # Sass Variables
|   |– _mixins.scss       # Sass Mixins
|
|– vendors/
|   |– _bootstrap.scss    # Bootstrap
|
|– base/
|   |– _reset.scss        # Reset/normalize
|   |– _typography.scss   # Typography rules
|
|– layout/
|   |– _navigation.scss   # Navigation
|   |– _grid.scss         # Grid system
|   |– _header.scss       # Header
|   |– _footer.scss       # Footer
|   |– _sidebar.scss      # Sidebar
|   |– _forms.scss        # Forms
|
|– components/
|   |– _buttons.scss      # Buttons
|   |– _carousel.scss     # Carousel
|   |– _cover.scss        # Cover
|   |– _dropdown.scss     # Dropdown
|
|– pages/
|   |– _home.scss         # Home specific styles
|   |– _contact.scss      # Contact specific styles
|
|– themes/
|   |– _theme.scss        # Default theme
|   |– _admin.scss        # Admin theme
|
 – main.scss              # Main Sass input file

일단 위와 같은 구조를 가진다고 생각하면 된다.

그리고 7개의 폴더(abstracts, vendeors, base, layout, components, pages, themes) 각각의 역할과 1개의 파일 main.scss의 역할에 대해 하나씩 알아보자.

 

1. abstracts

absctracts 폴더는 프로젝트 전체에서 사용되는 모든 Sass 도구와 도우미를 담고 있다.

예를 들어 모든 전역 변수, 함수, mixin 및 표시자를 넣어주면 된다.

• _variables.scss
• _mixins.scss
• _functions.scss
• _placeholders.scss

파일의 크기가 커지거나 프로젝트 규모가 큰 경우 abstracts 폴더 안에서 테마별로 폴더를 분리해서 사용해주면 좋다.

 

2. vendors

프로젝트에서 사용하는 외부 라이브러리 및 프레임워크의 모든 CSS 파일을 담고 있다.

• _bootstrap.scss
• _jquery-ui.scss
• _select2.scss

만약 이 외부 vendors의 있는 파일들을 재정의해야 하는 경우 sass 가이드라인에서는 vendors-extensions라는 8번째 폴더를 새롭게 만들어서 각 파일별로 관리를 하는 것을 권장하고 있다.

이는 외부 라이브러리 및 프레임워크의 CSS 파일을 직접적으로 편집하는 것을 피하기 위함이다.

 

3. base

프로젝트의 상용구 코드라고 부를 수 있는 내용을 담고 있다.

사이트 전반에 사용될 폰트, 디폴트 스타일이 여기에 해당된다.

• _base.scss (HTML 요소 - html, body 등 디폴트)
• _reset.scss (브라우저 기본 CSS 초기화)
• _typography.scss (폰트)
• _animations.scss (@keyframes를 포함한 애니메이션)

 

4. layout

사이트 구조에 해당하는 레이아웃을 담고 있다.

• _grid.scss
• _header.scss
• _footer.scss
• _sidebar.scss
• _forms.scss
• _navigation.scss

폴더 이름을 선호하는 항목에 따라 layout이나 patials라는 폴더명으로 사용하기도 한다.

 

5. components

layout보다 더 작은 구성 요소들을 담고 있다.

즉, 소형 레이아웃 같은 의미로 사이트 내에서 재사용 가능한 작은 부분들을 의미하는데, buttons, slider, loader, widgets 등이 포함된다.

• _buttons.scss
• _media.scss
• _carousel.scss
• _thumbnails.scss

당연히 컴포넌트 구성에 따라 아주 다양한 폴더와 파일들로 구성될 수 있다.

comonents폴더는 선호하는 항목에 따라 modules라고도 불리며 사용된다.

 

6. pages

모든 페이지가 동일한 스타일을 사용하지는 않기 때문에, 페이지 고유의 스타일이 있는 경우 페이지 이름을 딴 파일을 만들어서 이 폴더에 넣어 사용한다.

• _home.scss
• _contact.scss

 

7. themes

대규모 사이트와 애플리케이션에는 다양한 모드의 테마를 사용하고는 하는데, 각 모드에 따라서 각기 다른 스타일을 지정하여 담아두는 곳이다.

• _theme.scss
• _admin.scss

---

main.scss

위와 같이 각 폴더 기준에 따라 scss파일들을 분류했다면, 이 모든 파일들을 단 하나의 파일로 모아서 사용한다.

해당 파일은 직접적으로 스타일을 정의하지 않고 단지 "import"만을 담당하는 파일이다.

@import 'abstracts/variables';
@import 'abstracts/mixins';

@import 'vendors/bootstrap';

@import 'base/reset';
@import 'base/typography';

@import 'layout/navigation';
@import 'layout/grid';
@import 'layout/header';
@import 'layout/footer';
@import 'layout/sidebar';
@import 'layout/forms';

@import 'components/buttons';
@import 'components/carousel';
@import 'components/cover';
@import 'components/dropdown';

@import 'pages/home';
@import 'pages/contact';

@import 'themes/theme';
@import 'themes/admin';

main.scss에서 import를 관리하는 방법은 sass 가이드라인에서 많이 소개하고 있으니 가서 한 번쯤은 찾아보는 게 좋을 것 같다.

---

이렇게 7-1 패턴에 대해 어느 정도 알아봤는데, 이게 이름이 7-1 패턴이라고 해서 꼭 폴더구조를 7개를 만들 필요는 없다.

필요한 폴더만 만들어서 사용하면 되기 때문에 보통 n-1 패턴으로 사용되고는 한다.

---

참고: https://sass-guidelin.es/#architecture

Sass Guidelines

참고: https://www.learnhowtoprogram.com/user-interfaces/building-layouts-preprocessors/7-1-sass-architecture

7-1 Sass Architecture