SCSS/SASS를 위한 최고의 폴더 구조

SASS/SCSS를 사용하는 이유는 무엇입니까?

vanilla CSS에서 많은 웹사이트에 대한 코드를 작성한 후, 내가 뭔가 잘못하고 있다는 것을 깨달았습니다. 아주 간단한 문제를 디버깅할 시간이 많이 주어졌습니다.

그런 다음 2019년에 sass/scss를 발견한 후 지난 3년 동안 scss 스타일을 작성하고 있습니다. 이것은 내 많은 문제를 해결했기 때문입니다. 그리고 디버깅 코드도 훨씬 더 쉽고 시간을 절약해 줍니다. 재사용 가능한 구성 요소를 만들 수 있습니다. 프로그래머에게는 생명의 은인이기도 합니다.

*참고: * 여러분 모두 초기화 방법을 알고 계시기를 바랍니다.
sass/scss 프로젝트, 배우고 싶다면 댓글로 알려주세요.

개인적으로 사용하는 폴더 구조.

그래서 기본적으로 프로젝트를 시작할 때 이름이 sass/scss 인 루트 디렉토리를 만듭니다. 그 안에 폴더 5개와 main.scss 파일 1개를 만듭니다.



아래에서 각 폴더와 파일에 대해 하나씩 이야기하겠습니다.
**main.scss** : main.scss에서 모든 sass/scss 파일을 가져오곤 했습니다.

@import 'abstracts/variables';
@import 'abstracts/functions';
@import 'abstracts/mixins';

@import 'base/reset';
@import 'base/typography';

@import 'components/card';
@import 'components/button';
@import 'components/form';
@import 'components/carousel';

@import 'layout/grid';
@import 'layout/header';
@import 'layout/navigation';
@import 'layout/sidebar';

@import 'pages/about';
@import 'pages/auth';
@import 'pages/contact';

abstracts : 이 폴더에는 프로젝트에 대해 만들 수 있는 모든 sass 헬퍼가 포함되어 있습니다. 그 안에 변수, 함수, 믹스인 등을 생성합니다.

base : 이 폴더에는 재설정 및 타이포그래피에 대한 코드가 포함되어 있습니다. _reset.scss는 CSS 스타일을 재설정합니다. 예. a 태그의 텍스트 장식 및 ul 또는 ol의 목록 스타일.

components : 이 폴더에는 거의 모든 페이지와 머리글 및 바닥글에 버튼이 필요한 것처럼 재사용 가능한 UI 구성 요소가 포함되어 있습니다. 그래서 우리는 버튼, 카드, 캐러셀, 양식 및 모달 등과 같은 파일을 만듭니다.

layout : 이 폴더에는 사이트 레이아웃에 필요한 모든 스타일이 포함되어 있습니다. 머리글, 바닥글, 사이드바.

페이지 : 이 폴더에는 정보 페이지, 연락처 페이지, 인증 페이지 등과 같은 개별 페이지에 대한 스타일이 포함되어 있습니다.


이 기사를 읽어 주셔서 감사합니다. 언제든지 , , Github로 연락주세요.