[SCSS] Architecture (폴더 구조)

SCSS Architecture (7-1 패턴)

📁 scss/
|
|– 📁 abstracts/             
|   |– 📄 _var.scss          # 각종 변수
|   |– 📄 _mixins.scss       # Mixin
|	|– 📄 _function.scss     # 함수
|
|– 📁 vendors/
|   |– 📄 _swiper.scss       # 외부 라이브러리
|   |– 📄 _datepicker.scss   # 외부 라이브러리
|
|– 📁 base/
|   |– 📄 _reset.scss        # Reset/normalize
|   |– 📄 _typography.scss   # Typography rules
|   |– 📄 _print.scss        # print rules
|
|– 📁 layout/
|   |– 📄 _gnb.scss          # Global Navigation
|   |– 📄 _grid.scss         # Grid system
|   |– 📄 _header.scss       # Header
|   |– 📄 _footer.scss       # Footer
|   |– 📄 _sidebar.scss      # Sidebar
|   |– 📄 _forms.scss        # Forms
|   |– 📄 _spaces.scss       # 여백
|   |– 📄 _aligns.scss       # 정렬
|   |– 📄 _tables.scss       # 테이블
|
|– 📁 components/
|   |– 📄 _buttons.scss      # Buttons
|   |– 📄 _badges.scss       # Badges
|   |– 📄 _tab.scss          # Tab
|   |– 📄 _tooltips.scss     # Tooltips
|
|– 📁 pages/
|   |– 📄 _home.scss         # Home page
|   |– 📄 _contact.scss      # Contact page
|   |– 📄 _about.scss        # About page
|
|– 📁 themes/
|   |– 📄 _theme.scss        # Default theme
|
 – 📄 style.scss             # 찐 사용파일

• abstracts : 프로젝트 전체에 사용되는 변수, 믹스인, 함수, 플레이스 홀더 등을 배치
• base : reset, normalize, font정의 등 HTML요소의 표준 스타일
• vendors : 외부 라이브러리 스타일 (재정의, 거의 overwriting)
• layout : 사이트 구조에 해당하는 레이아웃인 gnb, header, footer 등을 정의
• components : 작은 구성요소로 재사용이 가능한 코드 집합체
• pages : 컴포넌트로 표현하지 못한 각기 다른 페이지의 구체적인 스타일
• themes : 웹서비스 사용자에 따라 적용하는 레이아웃 또는 다크 모드와 같은 접근성에 따라 배치

📄 style.scss

작성순서 : 변수 -> 믹스인 -> 리셋 -> 각각의 폴더별

@use "sass:math";

@import '/scss/abstracts/var'; // 변수
@import '/scss/abstracts/function'; // 함수
@import '/scss/abstracts/mixins'; // 믹스인
@import '/scss/base/reset'; // 리셋
@import '/scss/base/typography'; // 타이포
@import '/scss/base/print'; // 프린트

// 외부 라이브러리
@import 'swiper/scss';
@import 'swiper/scss/navigation';
@import 'swiper/scss/pagination';
@import 'react-range-slider-input/dist/style.css';
@import 'aos/dist/aos.css';
@import "vendor/datepicker";

// layout
@import '/scss/layout/header'; // 헤더
@import '/scss/layout/footer'; // 푸터
@import '/scss/layout/table'; // table
@import '/scss/layout/align'; // 정렬
@import '/scss/layout/space'; // 마진 패딩
@import '/scss/layout/sideNav'; // sideNav

// components
@import '/scss/components/button';
@import '/scss/components/badge'; 
@import '/scss/components/tooltip'; 

// pages
@import '/scss/pages/home';
@import '/scss/pages/contact'; // contact
@import '/scss/pages/about'; // about

 

📌 참고

hello.