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

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

 

7-1은 7개의 폴더와 하나의 파일을 의미한다.

 

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개의 폴더

 

1. abstracts

abstracts 폴더는 프로젝트 전체에서 사용되는 모든 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 (HTEML 요소 - html, body 등 디폴트)
• _reset.scss (css 초기화)
• _ typography.scss (폰트)
• _animations.scss (@keyframes를 포함한 애니메이션)

 

4. layout ( patials )

사이트 구조에 해당하는 레이아웃

• _grid.scss
• _header.scss
• _ footer.scss
• _sidebar.scss
• _forms.scss

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

 

5. components ( modules )

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

소형 layout 같은 의미로 사이트 내에서 재사용 가능한 작은 부분들 의미, buttons, slider, loader, widgets 등 포함

• _buttons.scss
• _media.scss
• _ carousel.scss
• _thumbnails.scss

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

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

 

6. pages

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

• _home.scss
• _notice.scss

 

7. themes

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

• _themes.scss
• _admin.scss

 

8. main

main.scss

 

(각 폴더에 _index.scss를 삽입 후 @forward를 넣어 연결한 상태에서의 이미지)

 

 

main.scss에서 관리하는 방법은 sass 가이드라인에서 많이 소개한다.

7-1이라고 해서 꼭 지켜야 할 필요는 없다.

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

 

 

 

 

 

 

 

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

Sass Guidelines

 

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

 

참고 : https://mine-it-record.tistory.com/594