7-1 패턴

https://imagineu.tistory.com/23#main.scss

[CSS] SCSS 아키텍처 7-1 pattern 폴더 및 파일 정리 하는 기준 (+ 실제 구성)

 

https://sass-guidelin.es/ko/#section-37

Sass Guidelines — Korean translation

 

7-1 패턴

abstracts, base, components, layout, pages, themes, vendors, + main

sass/

|

|– abstracts/

|   |– _variables.scss    # Sass 변수

|   |– _functions.scss    # Sass 함수

|   |– _mixins.scss       # Sass 믹스인

|   |– _placeholders.scss # Sass 플레이스홀더

|

|– base/

|   |– _reset.scss       # 리셋/정규화

|   |– _typography.scss  # 타이포그래피 규칙

|   …                    # 기타.

|

|– components/

|   |– _buttons.scss     # 버튼

|   |– _carousel.scss    # 캐러셀

|   |– _cover.scss       # 커버

|   |– _dropdown.scss    # 드롭다운

|   …                    # 기타.

|

|– layout/

|   |– _navigation.scss  # 네비게이션

|   |– _grid.scss        # 그리드 시스템

|   |– _header.scss      # 헤더

|   |– _footer.scss      # 푸터

|   |– _sidebar.scss     # 사이드바

|   |– _forms.scss       # 폼

|   …                    # 기타.

|

|– pages/

|   |– _home.scss        # 홈 한정 스타일

|   |– _contact.scss     # 연락처 한정 스타일

|   …                    # 기타.

|

|– themes/

|   |– _theme.scss       # 디폴트 테마

|   |– _admin.scss       # 관리자 테마

|   …                    # 기타.

|

|– vendors/

|   |– _bootstrap.scss   # Bootstrap

|   |– _jquery-ui.scss   # jQuery UI

|   …                    # 기타.

|

`– main.scss             # 메인 Sass 파일

 

 

abstracts

• 프로젝트에서 사용되는 모든 Sass 도구와 헬퍼를 모읍니다. 모든 전역 변수, 함수, 믹스인, 플레이스홀더
• 컴파일되었을 때 한 줄의 CSS도 산출하지 않아야 한다 
• utilities/  또는  helpers/ 

base

• 리셋 파일, 타이포그래피 규칙, 그리고 아마도 자주 사용되는 HTML 요소에 대한 표준 스타일을 정의

components

• 슬라이더, 로더, 위젯, 그리고 기본적으로 이들과 비슷한 것을 비롯해 온갖 구체적인 모듈
• modules

layout

• 사이트나 어플리케이션의 레이아웃에 기여하는 모든 것
• partials 

pages

• 페이지에 한정된 스타일

themes

• 여러 다른 테마

vendors

• 대부분의 프로젝트는 Normalize, Bootstrap, jQueryUI, FancyCarouselSliderjQueryPowered 등의 외부 라이브러리와 프레임워크에서 나오는 모든 CSS 파일을 담고 있는 vendors/ 폴더
• 만약 어느 vendor의 한 부분을 덮어써야 한다면, 덮어쓰는 vendor의 이름을 그대로 딴 파일들을 담는 여덟 번째 폴더인 vendors-extensions/를 만드는 것을 추천
• vendors-extensions/_boostrap.scss는 Bootstrap의 기본 CSS 일부를 재선언하는 모든 CSS 규칙을 담고 있는 파일입니다.

main

• 메인 파일은 전체 코드베이스에서 언더스코어로 시작하지 않는 유일한 Sass 파일이어야 합니다. 
• @import와 주석 외에는 아무것도 포함하지 않아야 합니다.

 

 

 

새로운 변수는 다음의 기준이 충족될 때에만 생성되어야 합니다.

• 값이 적어도 두 번 반복된다;
• 값이 적어도 한 번은 수정될 가능성이 크다;
• 값의 실현은 모두 변수와 관련되어 있다(즉, 우연에 의한 것이 아니라).