"오스냅!"이 시리즈는 오늘 적용할 수 있는 간단한 팁을 탐색합니다.

소개

오늘은 최근에 완성한 폴더 구조를 살펴보겠습니다.

저는 node-sass npm package 을 사용하고 있으며 Bulma 또는 Bootstrap과 같은 CSS 프레임워크를 항상 사용하고 있습니다.

약간의 연구와 시행착오 끝에 아래 시스템이 저에게 잘 맞는다는 것을 알게 되었습니다. 바라건대 그것은 당신에게도 도움이됩니다.

폴더 구조

다음은 명확성을 위해 단순화되었지만 본질적인 구조는 여전히 동일합니다. 실제Github repository here를 볼 수 있습니다.

/src
• ———— /components
•      |———— /NominationContainer
•            |———— NominationContainer.js
•            |———— nominationContainer.scss  <—— (section 2)
•
•
• ———— /sassStyles  <—— (section 1)
•      |————  _animations.scss
•      |————  _functions.scss
•      |————  _global.scss
•      |————  _mixins.scss
•      |————  _typography.scss
•      |————  _variables.scss

섹션 1

이 폴더는 구성 요소 외부에 있으며 여러 구성 요소에 영향을 줄 수 있는 모든 부분 및 스타일을 보유합니다. 섹션 2에서 볼 수 있듯이 개별 구성 요소는 필요에 따라 이러한 부분에서 가져옵니다.

• ———— /sassStyles  <—— (section 1)
•      |————  _animations.scss
•      |————  _functions.scss
•      |————  _global.scss
•      |————  _mixins.scss
•      |————  _typography.scss
•      |————  _variables.scss

_animations.scss

이 부분은 실제@keyframe CSS 애니메이션을 저장합니다. 구성 요소 스타일시트의 크기를 크게 줄이는 데 도움이 됩니다. our example에서 이 파일은 거의 800줄의 코드에 해당하는 22개의 애니메이션을 저장합니다! 그것은 구성 요소 파일에 절약된 많은 공간이며 이제 이 파일을 참조하기만 하면 됩니다.

_functions.scss

이 부분에는 값을 처리하고 반환하는 SASS 함수가 포함됩니다. 나는 이 프로젝트에서 그것들을 사용하지 않았지만, 이것의 좋은 예는 this StackOverflow thread 에서 찾을 수 있습니다.

_global.scss

이 부분에는 #root 또는 body 요소와 같은 전역 요소를 재정의하는 스타일이 포함되어 있습니다. In our example 또한 색상을 참조하기 위해 _variable.scss 파일을 가져옵니다.

_mixins.scss

이 부분은 반복 가능한 모든 코드 블록을 보유할 수 있습니다. In our example 믹스인을 사용하여 중단점 크기를 결정하고 있습니다. 그들은 또한 변수를 사용하고 있으므로 전체lg 크기가 변경되면 모든 곳에서 업데이트됩니다.

_typography.scss

이 부분은 h1-h6 , p , 전역 클래스 또는 ID와 같은 주요 타이포그래피 요소 스타일을 보유합니다. our example 에서 볼 수 있듯이 저는 여기에 색상과 같은 특정 속성을 적용하는 것을 피하고 싶습니다. 이렇게 하면 특정성에 대한 걱정 없이 앱의 다른 부분에서 유연하게 변경할 수 있습니다.

_변수.scss

이 부분에는 브랜드 색상 및 크기와 같은 반복 가능한 속성 값이 포함됩니다. 변수#002e25에 $primaryDark2Color를 저장하면 나중에 전역적으로 색상을 변경하는 옵션을 유지하면서 color 및 border와 같은 속성에 적용할 수 있습니다.

섹션 2

이것은 스타일링을 위한 .js 파일과 관련 파일.scss이 있는 개별 구성 요소의 예입니다.

/src
• ———— /components
•      |———— /NominationContainer
•            |———— NominationContainer.js
•            |———— nominationContainer.scss  <—— (section 2)

지명 Container.scss

이것은 개별 구성 요소.scss 파일의 예이며 아래에 해당 코드를 포함했습니다. animations , variables 및 mixin 부분을 가져오는 방법에 유의하십시오.

이 때문에 애니메이션은 설정을 구성하는 데 2줄의 코드만 있으면 됩니다. 색상은 변수를 기반으로 하고 미디어 쿼리는 믹스인에서 가져옵니다.

앞으로는 원본 부분 파일에서 이러한 파일을 변경할 수 있으며 여기에서 업데이트됩니다.

@import '../../../sassStyles/variables';
@import '../../../sassStyles/animations';
@import '../../../sassStyles/mixins';

.nom-container {
    background: $primaryDark1Color;
    height: 100%;
    padding: 26px 20px;
    margin-top: 15px;
    opacity: 0;

    -webkit-animation: fade-up 1s cubic-bezier(0.165, 0.840, 0.440, 1.000) 1.4s both;
        animation: fade-up 1s cubic-bezier(0.165, 0.840, 0.440, 1.000) 1.4s both;


    @include customMinBreakPoint(1024) {
        margin-top: 0;
        padding: 26px 0 50px 0;
        -webkit-animation: fade-left 1s cubic-bezier(0.165, 0.840, 0.440, 1.000)  both;
        animation: fade-left 1s cubic-bezier(0.165, 0.840, 0.440, 1.000)  both;
    }

    &__counter-wrapper {
        display: flex;
        justify-content: center;  
        margin-bottom: 30px;
        margin-top: 0;
        opacity: 0;

        -webkit-animation: fade-up 0.9s cubic-bezier(0.165, 0.840, 0.440, 1.000) 1.6s both;
        animation: fade-up 0.9s cubic-bezier(0.165, 0.840, 0.440, 1.000) 1.6s both;

        @include customMinBreakPoint(1024) {
            justify-content: flex-end; 
            margin-right: 50px;
            margin-bottom: 75px;

            -webkit-animation: fade-up 0.9s cubic-bezier(0.165, 0.840, 0.440, 1.000) 0.25s both;
            animation: fade-up 0.9s cubic-bezier(0.165, 0.840, 0.440, 1.000) 0.25s both;
        }

        @include customMinBreakPoint(1400) {
            margin-right: 12%;
        }

        @include customMinBreakPoint(1500) {
            margin-right: 15%;
        }
    }
}

Figma으로 디자인된 썸네일