SASS 설치

npm  install  -g  sass

파일명

파일명 맨앞에 _가 붙는 것은 import 되는 파일이라는 뜻이다.
import 할 때는 _없이 써도 된다.
ex) base 폴더에 있는 _reset.scss 를 import 할 때 @import "./base/reset";

7-1 Architecture

SASS에는 유명한 아키텍쳐가 있다.
7-1 라고 해서 7개의 폴더와 1개의 파일을 사용한다.
구조는 다음과 같다.

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

실제 스타일은 없고, 다른 폴더에 정의된 스타일을 도와는 역할

• _minxins.scss : 재사용 가능한 코드 모음(flex, media query 등)
• _variables.scss : 변수명 지정 (색상, 폰트사이즈, 그리드 사이즈 등)

2. vendors

프로젝트에서 사용하는 외부 스타일

• ex) 부트스트랩 stylesheet

3. base

사이트 전반에 걸쳐서 재사용되는 스타일

• ex) 사이트 전반에 사용될 폰트, 디폴트 스타일
• _reset.scss
• _typography.scss

4. layout

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

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

5. components

사이트 내에서 재사용 가능한 부분들

• _buttons.scss
• _carousel.scss
• _cover.scss
• _dropdown.scss

6. pages

페이지별 구체적인 스타일

• _home.scss
• _contact.scss

7. themes

다크모드와 라이트모드 같이 사이트에서 다른 종류의 모드를 지원할 때 사용

• _theme.scss # Default theme
• _admin.scss

main.scss

위에서 기준에 따라 폴더별로 분류한 파일을 한 곳에 모아주는 파일

• 직접 스타일 정의x
• import만 담당

참고: Sass Guideline