[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
(각 폴더에 _index.scss를 삽입 후 @forward를 넣어 연결한 상태에서의 이미지)
main.scss에서 관리하는 방법은 sass 가이드라인에서 많이 소개한다.
7-1이라고 해서 꼭 지켜야 할 필요는 없다.
필요한 폴더만 만들어서 사용하면 되기 때문에 보통 n-1 패턴으로 사용되기도 한다.
참고 : https://sass-guidelin.es/#architecture
Sass Guidelines
An opinionated styleguide for writing sane, maintainable and scalable Sass.
sass-guidelin.es