[SASS] Sass 7-1 Architecture

Sass 7-1 Architecture

- sass 프로젝트를 구성하는 인기가 많고 효과적인 모듈식 방법 중 하나

- 7개의 폴더에 속한 파일들을 단 하나의 파일을 통해서 사용

 

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

 

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 패턴의 목적은  css를 더 잘 관리하는 것이다.

7개의 폴더를 반드시 써야 하는 건 아니며, 필요한 폴더를 골라 n-1 패턴으로 사용할 수 있다.

 

출처: https://mine-it-record.tistory.com/594 , https://imagineu.tistory.com/23