Sass

7-1 패턴

js0616 2024. 8. 31. 20:58

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

 

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

CSS 공부를 위해 Udemy에서 advanced css인강을 하나 들었었는데, 그 인강에서 SCSS 파일들을 구분해놓은 방식이 신기했었다. 나중에 알고보니까 그렇게 파일을 구분해놓은 것이 CSS 아키텍처 중 하나인

imagineu.tistory.com

 

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

 

Sass Guidelines — Korean translation

분별 있고, 유지∙확장 가능한 Sass 작성을 위한 주관적인 스타일가이드.

sass-guidelin.es

 

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와 주석 외에는 아무것도 포함하지 않아야 합니다.

 

 

 

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

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