SCSS/SASS 폴더 구조

2020년에 복잡한 프런트엔드 프로젝트를 훑어보고 있다면, 어떤 CSS 프로세서를 쉽게 볼 수 있다.저는 개인적으로 이 프로세서에서 SCS를 사용하는 것을 더 좋아합니다.처음에 나는 단지 일부 파일을 scss 폴더에 두었을 뿐이지만, 복잡한 프로젝트를 처리하기 시작했을 때, 나는 CSS/SCSS 코드를 유지할 수 없는 문제에 직면했다.제 폴더 구조는 제시 쇼월트 동영상의 계발을 많이 받았습니다.그럼, 내가 어떻게 문제를 해결하는지 보자!

폴더 구조

/src
 |
 |- scss/
         |
         |- 00-tools/
         |- 01-helpers/
         |- 02-basic/
         |- 03-layout/
         |- 04-modules/
         |- 05-pages
         |   |
         |   |- about/
         |- app.scss

나는 도구, 조수, 기초, 레이아웃, 모듈과 페이지 등 5개의 주요 폴더로 나눈다.나는 1분 안에 모든 폴더를 깊이 연구할 것이다.이 폴더들을 제외하고 나는 app.scss 폴더의 루트 디렉터리 아래의 scss 파일도 있다.이 프로그램 파일은 모든 다른 폴더에서 다른scss 파일을 가져옵니다.이렇게 하면, 나는 나의 패키지를 이 파일로 가리킬 수 있으며, 이것은 나의 전체 SCSS 코드를 쉽게 가져올 수 있다.이제 각 폴더에 대해 자세히 살펴보겠습니다.
지금 질문이 하나 있을 수도 있는데, 왜 내가 폴더의 이름 앞에서 숫자를 사용하는지, 이것은 매우 좋은 질문이다.앞에 숫자를 추가함으로써, 나는 항상 내가 언급한 순서대로 이 폴더들을 볼 것이다.이것은 내 폴더 구조를 쉽게 상상할 수 있도록 도와주고, 나는 어떤 파일/코드가 어느 디렉터리에 놓일지 신속하게 결정할 수 있다.이 숫자들은 app.scss 파일에서 가져오는 순서도 나타낸다.예를 들어, basic 폴더 아래에 기본 스타일이 있을 수 있으며 페이지 정보에서 해당 스타일을 덮어씁니다.이 경우, 숫자는 확실히 이 파일들의 가져오는 순서를 이해하는 데 도움을 줄 수 있습니다.두 자릿수를 사용하는 데는 특별한 이유가 없지만.내가 제시의 동영상에서 물려받은 거야.

공구
이 디렉토리는 프로젝트에 사용된 모든 SCSS 도구 또는 타사 CSS 파일의 홈 디렉토리입니다.많은 개발자들이 bourbon을 사용하는데, 이것은 당신의 개발 환경에 몇 가지 유용한 함수를 추가합니다.너는 이 폴더에 이런 도구를 추가해야 한다.이곳도 프로젝트에서 사용하는 제3자 라이브러리에서 다운로드한 css 파일의 집입니다.나는 이 폴더에 reset.css 파일을 넣는 것을 좋아한다. 이렇게 하면 프로그램에서 처음부터 가져올 수 있다.scss와 나는 다른 파일의 스타일을 쉽게 덮어쓸 수 있습니다.

조수
SCSS 변수, 함수 및 블렌드에 대해 별도의 파일을 사용하는 것이 일반적입니다.이 디렉터리는 바로 이 파일들을 저장하는 곳이다.이것은 SCSS와 관련된 모든 변수와 함수를 한 곳에서 찾을 수 있기 때문에 매우 유용하다.이 폴더에서 변경할 수 있습니다. 이것은 모든 코드에 영향을 줍니다.SCSS 함수를 업데이트하고 싶을 때, 이것은 정말 유용합니다.코드를 훑어보지 않아도 함수를 찾을 수 있다.나는 보통 이 폴더에 세 개의 파일이 있다. 변수.SCS, 블렌드.SCS 및 기능scss.나는 내 프로젝트에서 함수와 혼합을 대량으로 사용하지 않기 때문에, 내 프로젝트에서 이 파일들을 찾을 수 없을 수도 있지만, 대형 프로젝트를 처리할 때 이 폴더는 매우 유용할 것이다.

02 기초
이것은 CSS 코드로 시작하는 폴더입니다. 웹 사이트를 디자인할 것입니다.이름에서 설명한 바와 같이 이 폴더는 사이트의 모든 기본 CSS 코드를 포함합니다.그것은 탭의 기본 스타일을 포함한다. 예를 들어 section, article, 텍스트 관련 탭, 격자 시스템 등이다. 나는 각자의 파일에서 코드를 분리하는 것을 좋아한다.예를 들어, 나는 typography.scss 파일을 만들었는데, 그 중에서 모든 텍스트 요소와 관련된 모든 기본 스타일을 저장했다.만약 내 사이트의 링크에 몇 가지 다른 기본 양식이 있다면, 나도 links.scss 파일을 만들 것이다.

03 레이아웃
일반적으로 우리는 사이트의 모든 페이지에 같은 눈썹과 꼬리 모양을 가지고 있다.이 경우 이러한 요소의 CSS 코드를 다른 파일에서 분리하는 것이 좋습니다.만약 당신이 대형적이고 복잡한 웹 디자인을 하고 있다면, 서로 다른 페이지의 일부 부분은 같은 텍스트와 레이아웃이 있거나, 같은 레이아웃이 있는 것을 발견할 수 있을 것이다.이 경우 이 폴더에 섹션에 대한 SCSS 파일을 생성합니다.이렇게 하면 나는 사이트 레이아웃 부분과 관련된 모든 코드를 찾을 수 있다.

04 모듈
레이아웃과 모듈 폴더는 큰 차이가 없다. 모듈 폴더에 작은 요소를 포함하는 것을 제외하고 이런 요소들은 전체 사이트에서 반복적으로 나타난다.이 폴더의 좋은 예는 우리가 사이트의 다른 페이지에서 사용할 카드이다.나는 보통 이 폴더에 단추, 카드, 술집, 갤러리 등의 파일을 만든다.사이트에서 적어도 두 번은 사용한 모듈에 코드만 추가하지만.만약 한 요소가 한 페이지에서만 사용된 적이 있다면, 나는 차라리 05-pages 폴더를 사용하겠다. 왜냐하면 이 폴더는 이 페이지의 특정 코드를 포함하기 때문이다.

05페이지
여기에서, 우리는 이전에 특정 페이지를 위해 작성한 CSS 코드를 다시 쓰거나, 이 페이지에만 새 코드를 추가합니다.만약 한 페이지에 파일 하나만 필요하다면, 나는 이 디렉터리의 루트 단계에서 페이지 이름이 있는 파일을 만들 것이다.때때로 페이지에 여러 개의 파일이 필요한 경우는 드물다. 이런 상황에서 나는 폴더에 페이지 이름이 있는 폴더를 만들고 이 폴더에 파일을 추가한다.이렇게 하면 우리는 이 페이지의 코드를 쉽게 식별할 수 있다.
코드가 어떻게 이 페이지에 있는 요소의 스타일만 덮어씁니까?이 문제를 해결하기 위해서, 나는 새로운 클래스를 만들었는데, 이 클래스들은 페이지의 이름으로 미리 닫혀 있습니다.이것은 효과적인 해결 방안이지만, 결코 효과가 없고, 이해하기도 쉽지 않다.이 때문에 나는 최근에 이 문제를 해결하는 새로운 방법을 생각해냈다.페이지의 폴더에 index.scss 파일을 만들었습니다.이 파일은 다음과 같이 보입니다.

// scss/05-pages/about/index.scss
body#about {
    @import './carousal.scss';
}

보시다시피 이 인덱스 파일을 app.scss 파일로 가져오면, 스타일을 덮어쓰지만, id가 about인 주체에만 적용됩니다.이렇게 하면 페이지의 표시를 너무 많이 변경할 필요가 없습니다.페이지 주체에 id 속성을 추가하면 css 코드가 이 페이지에 적용됩니다.

응용 프로그램.scss
모든 SCSS 코드의 주 엔트리 파일입니다.위 폴더(index.scss페이지 폴더)에 생성된 모든 파일을 올바른 순서로 가져옵니다.폴더에 새 파일을 만들면 app.scss에서 파일을 가져오면 새 SCSS 코드가 빌드 프로세스에 추가됩니다.마음에 들지 않거나 폴더당 파일이 너무 많으면 폴더당 index.scss개의 파일을 추가하고 해당 폴더의 모든 파일을 각각의 인덱스 파일로 가져올 수 있습니다.그런 다음 이러한 주 색인 파일을 app.scss으로 가져올 수 있습니다.이렇게 하면 app.scss에서 5줄 코드만🎉!

결론
이 폴더 구조는 내가 많은 사이트의 CSS 코드를 조직하는 데 도움을 주었다.일부 작은 프로젝트에 있어서는 좀 지나칠 수 있지만, 대형 프로젝트나 상당히 복잡한 프로젝트를 처리하고 있다면, 이 폴더 구조는 코드를 구성하는 데 도움을 줄 수 있습니다.다시 한 번 주의하지만, 당신은 완전히 같은 구조를 따를 필요가 없습니다.
이보다 더 좋은 해결 방안이 있거나, 내 폴더 구조 성능을 향상시키는 조언이 있다면, 평론 부분에 평론을 남겨 주십시오.만약 네가 좋아한다면 이 댓글에 좋아요를 보내는 것을 잊지 마라!이 블로그를 읽어주셔서 감사합니다.🙇! 만약 당신이 내가 어떻게 나의 프로젝트를 조직하는지에 대해 더 알고 싶다면, 나를 구독해 주십시오. 당신은 생방송 기간에 나에게 질문할 수 있습니다. 예!