SASS 코드를 구성하는 방법

저는 이미 다른 회사에서 일했고 규모와 코드 라이브러리를 가지고 있습니다. 저는 다양한 코드 라이브러리 구조를 보았고 처음부터 시작하는 코드 라이브러리를 만드는 데 도움을 주었습니다.
작은 팀(두 명 또는 세 명의 개발자)과 합작하는 것은 하나의 일이고 +10과 함께 일하는 것은 다른 일이다. 처음부터 좋은 구조를 정의하는 것은 매우 중요하다. 이것은 우리가 팀의 규모를 확대하고 같은 생산력 수준과 좋은 코드를 유지하는 데 도움이 된다.
제 경험에 따라 우과 길라델(Hugo Giraudel)의 모델, 즉 7-1모델을 따라 제가 일했던 거의 모든 프로젝트를 개인적으로 조정했습니다. 저는 정확한 구조를 찾았고 지금까지 좋은 실천을 통해 일을 잘 했습니다.
물론 오늘 당신의 styled-components 또는 Emotion 프로젝트에서 React/Vue를 사용할 수 있지만 CSS 또는 SASS만 사용할 수 있는 프로젝트가 많습니다.계속합시다...
나는 SASS, 특히.scss 파일 확장자는 CSS에 존재하지 않는 중요한 기능을 제공합니다. 예를 들어 플러그인 선택기, 혼합, 함수, 변수 (CSS는 현재 사용자 정의 속성이 있지만 차이가 있습니다.) 는 우리의 업무 효율을 향상시킵니다.
7-1 모드를 기준으로 모든 ss 구역은 7개의 다른 폴더에 있고 루트 단계에 모든 폴더를 가져오는 파일이 있습니다.이것은 나중에 모든 컨텐트를 단일 CSS 스타일시트로 컴파일하는 데 사용됩니다.

base/
components/
layout/
pages/
themes/
abstracts/
vendors/
main.scss 

이것이 바로 우리의 구조이다. 그때부터 우리는 거의 모든 건의를 따랐다.
이런 모델은 약간의 미세한 차이가 있다. 시간의 추이에 따라 우리는 작은 프로젝트에서 큰 프로젝트로 적응하기 위해 자신의 체계 구조를 재구성하고 창설해야 한다.

매인.모든 수입 SCS
프로젝트의 모든sass 파일을 파일로 가져오는 것을 좋아하지 않습니다.필요한 CSS만 가져오는 페이지를 만들려면 도움이 되지 않습니다.
예: 웹 사이트의 모든 CSS를 가져와야 하는 간단한 로그인 페이지가 있습니까?물론 아니지, 그렇지?

Dell 솔루션:
모든 페이지에서, 우리는 두 개의 폴더, abstracts 와 base 폴더만 가져올 수 있습니다.
이 폴더에 대해 우리는 _global.scss 파일을 만들어서 모든 파일을 가져옵니다.

/abstracts
    _functions.scss
    _variables.scss
    _mixins.scss
    _global.scss
/base
    _general.scss
    _fonts.scss
    _global.scss

가져온 각각_global:

// abstracts/_global.scss
@import 'variables';
@import 'functions';
@import 'mixins';

// base/_global.scss
@import '../abstracts/global';
@import 'general';
@import 'fonts';

우리는scss 파일의 abstracts 폴더의 모든 파일이mixin, 변수, 함수를 사용할 수 있기 때문에 시간을 절약하고 abstracts 폴더의 _global.scss를 기본 폴더의 _global.scss에 가져올 수 있습니다.이렇게 하지 않으면, 우리는 페이지마다 요약을 가져와야 한다. _global.scss모든 페이지에 특정한 CSS 파일을 만들고 필요한 내용만 가져오려면 웹 패키지나parcel을 사용하여 여러 항목과 출력을 생성할 수 있습니다.웹 패키지를 어떻게 사용하는지 SASS here 를 통해 더 많은 정보를 찾을 수 있습니다.
상기 해결 방안을 사용하면 sign-in.scss 폴더에 page 파일을 만들 수 있습니다. 이 파일은 페이지에 표시할 기본값과 특정 구성 요소를 가져옵니다.

// sign-in.scss
// scss/ is an alias

@import 'scss/base/global';
@import 'scss/layout/header';
@import 'scss/layout/form';
@import 'scss/components/buttons';
@import 'scss/components/auth';
@import 'scss/components/loaders';

더 적은 수의 폴더 사용
7-1 모드에서 제안한 폴더 구조를 따르기 시작했지만, 우리가 처리한 모든 항목 중 모든 폴더를 사용해야 하는 항목은 없습니다.
나는 아래의 건의가 대다수 상황에 적용되고 소형과 대형 프로젝트에 적용될 것이라고 믿는다.
작은 프로젝트든 큰 프로젝트든 기본 Sass 코드를 정의해야 합니다. 예를 들어 색, 글꼴 크기, 리셋 등. 그리고 페이지와 구성 요소를 정의해야 합니다.
여기서 작은 항목과 큰 항목 사이에는 차이가 없고 파일의 수량만 있다.

/abstracts
    _functions.scss
    _global.scss
    _mixins.scss
    _variables.scss
/base
    _fonts.scss
    _general.scss
    _global.scss
    _typography.scss
/components
    _header.scss
    _form.scss
    _buttons.scss
    ...
/vendor
    _bootstrap.scss
    _normalize.scss
/pages
    auth.scss
    homepage.scss
    ...

요약/abstracts 폴더는 프로젝트를 완성하는 데 도움을 줄 수 있는sass 도움말을 모두 포함합니다.이것은sass공구, 변수, 혼합, 함수, 점위부호 등에 관한 것이다.
우리는 _global.scss 모든 파일을 가져와서, 이 가져오기로 다른 파일을 채우지 않습니다.

베이스/base 폴더에는 프로젝트의 모든 템플릿 파일이 들어 있습니다.기본 스타일을 설정하고 사용자 정의 글꼴을 가져오며 제목, 단락, 하이퍼링크에 기본 스타일을 설정합니다.

구성 요소
React와 같은 자바스크립트 프레임워크를 사용할 때 사고 과정에 따라 모든 것이 하나의 구성 요소이다.탐색 모음, 제목 또는 버튼 등의 구성 요소를 생각할 수 있는 별도의 재사용 가능한 UI 위젯입니다.
이것이 바로 우리가 꼬리나 꼬리 등 요소의 레이아웃 폴더를 사용하지 않고 구성 요소로 구성된 페이지를 만드는 이유입니다.

행상인/vendor 폴더에는 애플리케이션에 필요한 타사 파일이 모두 들어 있습니다.이것은 당신이 생각할 수 있는 모든 css 파일을 리셋하고 안내할 수 있습니다.
만약 이 파일들이 사이트의 모든 페이지에 포함되어야 한다면, 우리는 가져올 것이다. /base/general.scss
페이지/pages 폴더에는 각 페이지의 특정 스타일이 포함되어야 하며 파일 이름은 페이지 이름이어야 합니다.우리의 용례에서, 우리는 webpack 를 사용하여 모든 페이지에 특정한 CSS 파일을 만들고, 모든 페이지에 필요한 기본 스타일과 구성 요소를 가져옵니다.우리가 이 점을 어떻게 하는지 더 많은 정보를 찾을 수 있습니다. here
이 방법은 페이지에 필요한 코드만 가져오고 파일의 크기를 줄일 수 있습니다.
예를 들면 다음과 같습니다.

// billing.scss
@import 'scss/base/global';
@import 'scss/components/header';
@import 'scss/components/footer';
@import 'scss/components/form';

.billing {
  max-width: 640px;
  margin-top: pixelToRem(90px);

  &-section {
    margin-bottom: pixelToRem(60px);

    p {
      margin-top: pixelToRem(5px);
    }
  }
}

자바스크립트와sass/less 파일을 묶고 변환하는 데 webpack 같은 것을 사용하지 않고 main.scss 모든 내용을 가져올 수 있다면, 폴더마다 _global.scss 파일이 다른 모든 파일을 가져오고, 전역 파일을 주 파일로 가져올 수 있도록 합니다.

// main.scss
@import 'scss/abstracts/global';
@import 'scss/base/global';
@import 'scss/components/global';
@import 'scss/pages/global';
@import 'scss/vendor/global';

나는 이 문장이 너에게 도움이 되기를 바란다.
7-1모델은 우리가 기초를 닦는 데 도움을 주었고 우리는 우리의 수요를 만족시키기 위해 약간의 조정을 했다.이러한 방법은 모든 것이 하나의 구성 요소로 되어 있으며 페이지는 독립적이고 다시 사용할 수 있는 부분으로 구성되어 있으며 사용자에게 보내는 더 작은 CSS 파일을 만들고 더욱 모듈화된 Sass 구조를 갖추어 프로젝트와 팀이 성장할 때 확장할 수 있도록 도와줍니다.