[CSS] Sass프로젝트 7-1패턴

Joowon Jang·2024년 5월 29일

CSS

목록 보기

3/3

Sass를 활용하면 복잡한 스타일(CSS)을 효율적으로 유지 관리할 수 있다.
많은 방법이 있지만 컴포넌트(Component) 위주의 설계를 알아보자.

컴포넌트와 구조 설계

최근 많은 프레임워크 등에서 사용하며, 스타일시트를 짧고 효율적으로 유지할 수 있는 '컴포넌트'의 모음으로 인터페이스를 생각하는 것이 좋은 생각이 될 수 있다.
아래 페이지의 가이드라인을 참고하여 '7-1 패턴'으로 프로젝트를 설계하는 방법을 알아보았다.

Sass Guidelines
https://sass-guidelin.es/ko/#section-34

컴포넌트란?

웹 페이지에서 컴포넌트란 쉽게 말해서 '페이지를 구성하는 재사용 가능한 부품'이다.
앞서 말한 가이드라인에서는 컴포넌트를 아래와 같이 말하고 있다.

단 한 가지 일만 한다
재사용이 가능하고 프로젝트 전체에 걸쳐 재사용된다
독립적이다.

검색 폼, 제출 버튼, 메뉴바 등 분류하기에 따라 많은 것들이 컴포넌트가 될 수 있다.

7-1 패턴

폴더 7개, 파일 1개.
기본적으로, 7개의 폴더에 채워 넣은 모든 부분 파일과, 이들을 불러들여 CSS 스타일시트로 컴파일하는 루트 레벨에 있는 하나의 파일(대개 main.scss)을 갖게 된다.
7-1 패턴 예시

base/

리셋 파일, 타이포그래피 규칙, 자주 사용되는 HTML 요소에 대한 표준 스타일(_base.scss) 등
components/

컴퍼넌트들이 들어간다. 사이트/애플리케이션의 온갖 구체적인(작은) 모듈들의 스타일
layout/

사이트나 어플리케이션의 레이아웃에 기여하는 모든 것들.
사이트의 주요 부분(header, footer, navigation, sidebar…)을 위한 스타일
pages/

페이지에 한정된 스타일.
예를 들면, 로그인페이지에만 한정된 스타일이 있을 때 pages/ 폴더 속 _login.scss
themes/

큰 사이트와 어플리케이션에서 여러개의 테마들을 사용할 때, themes/ 폴더에 전부 모아두는 것을 선호한다.
abstracts/ (또는 utilities/ or utils/)

전역 변수, 함수, 믹스인, 플레이스홀더 등 프로젝트에서 사용되는 모든 Sass 도구와 헬퍼들.
이 폴더에는 그 자체만으로는 컴파일되었을 때 한 줄의 CSS도 산출하지 않아야 한다. 그저 Sass 헬퍼일 뿐이다.
vendors/

외부 라이브러리와 프레임워크에서 나오는 모든 CSS 파일을 담고 있는 폴더
만약 어느 vendor의 한 부분을 덮어써야 한다면, 덮어쓰는 vendor의 이름을 그대로 딴 파일들을 담는 여덟 번째 폴더인 vendors-extensions/를 만드는 것을 추천
main.scss

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

사용 예시 (5-1?)

아래의 이미지는 내가 실제로 7-1패턴을 사용하여 작은 웹 페이지를 만들었을 때 구조이다.
vendors, themes는 사용하지 않아서 5개의 폴더만 있으며, styles 폴더의 main.css는 main.scss가 전처리를 거쳐 변환된 파일이다.

각 폴더의 내부

main.scss ("@use"만 존재)

main.scss에서는 위와 같이 페이지 내의 모든 요소에 공통으로 적용할 base와 프로젝트를 구성할 layout, 그리고 각각의 pages만 사용하였다. 그 이유는 아래와 같다.

@import가 아닌 @use를 사용하면 같은 파일을 여러번 불러오더라도 CSS 파일로 변환되었을 때, 한번만 사용된다.
그래서 각 component에서 utils를, component에서 다른 component의 scss파일을, layout과 pages에서 component를 각각 필요한 경우에 @use로 불러와서 사용하였다.

그림으로 정리해보면 아래와 같다.

Sass 그래프