SCSS / SCSS Architecture, 초기 셋팅 폴더 구조 정리

웹 앱을 만들기 위해서 html 공부하다 알게 된 SCSS

수정이 너무 용이해서 신세계를 경험했습니다.

 

브라우저가 scss파일을 직접 읽지 못하기 때문에 css로 컴파일 과정을 거쳐야 합니다.

---

1. SCSS 프로그램 설치

비주얼 스튜디오 코드를 설치합니다.

Visual Studio Code - Code Editing. Redefined

 

 

2. SCSS 작업 환경

비주얼 스튜디오 코드에서 제공하는 플러그인 중 Live Sass Compiler를 설치를 해주세요

scss 작업을 css파일로 컴파일해 줍니다.

Live Sass Compiler - Visual Studio Marketplace

 

 

3. SCSS 폴더 구조 만들기

SCSS 작업 시 Architecture 폴더 구조 정리로

프로젝트마다 필요한 폴더 및 파일은 추가 및 삭제하며 작업합니다.

/abstracts	_function.scss _mixin.scss _variables.scss ...	프로젝트 전체에 사용되는 변수, 믹스인, 함수 , 플레이스 폴더 등을 배치
/base	_reset.scss _typography.scss _print.scss ...	html 요소의 표준 스타일 가이드 배치
/component	_board.scss _button.scss _calendar _dialog.scss _form.scss _gnb.scss _tab.scss _location.scss _toggle.scss _badge.scss _empty.scss ...	재사용 가능한 구성요소 배치
/layout	_navigation.scss _header.scss _footer.scss _align.scss _guide.scss _space.scss _sub.scss ...	사이트 구조에 해당하는 레이아웃 등을 정의하여 배치
/vendors	_swiper.scss ...	프로젝트에 사용되는 외부 스타일을 배치
/pages	_product.scss _login.scss _admin.scss ...	컴포넌트로 표현하지 못한 각기 다른 페이지 의 구체적인 스타일을 배치
/themes	_dark.scss _light.scss ...	웹서비스 사용자에 따라 작용되는 레이아웃 또는 다크 모드와 같은 접근성에 따라 배치

 

SCSS 파일을 작성 시에는 반드시 scss폴더에 style.scss을 만들어 import 작업 진행합니다.

@import 'abstracts/variables'; //변수
@import 'abstracts/function';  //함수
@import 'abstracts/mixin'; //믹스인

@import 'base/reset'; //리셋, 노멀라이즈 css
@import 'base/typography'; //폰트

@import 'layout/header'; // 해더
@import 'layout/footer'; // 푸터
@import 'layout/align'; // 정렬
@import 'layout/space'; // 공간

@import 'components/button'; // 버튼
@import 'components/form'; // 온라인서식
@import 'components/title'; // 타이틀
@import 'components/tab'; // tab
@import 'components/card'; // 카드
@import 'components/board'; // 게시판
@import 'components/map'; // 지도

...