각도 및 Sass

Angular의 View Encapsulation(각 구성 요소에 자체 CSS 스타일 시트가 있음)의 문제 중 하나는 사소한 조정에만 적합하고 깊은 스타일을 다루지 않는다는 것입니다! 사실로; Angular는 한동안 이 문제를 해결한 NGDeep을 더 이상 사용하지 않습니다.::ng-deep 방지에 대한 자세한 내용은 여기를 참조하십시오.

Angular 10 - ::ng-deep(ngdeep) 사용 금지

존 피터스 ・ 2020년 8월 3일 ・ 3분 읽기

#angular #typescript

사스
SASS의 장점은 Specivity를 염두에 두고 설계되었다는 것입니다. 즉, 스타일 구조를 올바르게 지정하면 페이지의 모든 요소에 접근하여 마음대로 조정할 수 있습니다. 더 이상 구성 요소 스타일 시트에서 작업을 시도할 필요가 없습니다.

프로젝트에는 Core.scss 스타일이 있어야 합니다.

프로젝트가 루트 디렉터리에서 SASS(Core.scss)를 사용하는 경우 원하는 만큼 깊이 있는 모든 구성 요소에 접근할 수 있습니다.

이렇게 하면 재사용 가능한 구성 요소의 스타일을 지정할 수 있습니다. 시작하려면 Core.scss 파일에 각 구성 요소에 대한 기본 스타일이 있어야 합니다.

각 구성 요소 기준 스타일

app-custom-component {
  display: grid;
  justify-content: start;
  .buttons {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(1em, 1fr));
    width: 3.5em;
    justify-self: end;
    font-size: 1em;
    margin-left: 1em;
  }
}

재사용된 각 구성 요소 조정

해당 구성 요소의 재사용을 위해 연속적인 조정이 뒤따릅니다.

//the main component contains the custom component

app-main-component{
  app-custom-component { 
    // minor adjustment here
    justify-content: end;
     .buttons {
       // minor adjustment here  
       width: 7em;
    }
 }
}

피할 수 없는 부채
불행하게도 위에서 설명한 것처럼 루트에서 SCSS를 사용하는 이 문제는 우리가 거대한 모놀리식 구조를 만들고 있다는 것입니다. 세분화되어 있어도 2,000줄의 스타일링이 가능한 것은 매우 쉽습니다. 유지 보수에 완벽하지는 않지만 SASS 작동 방식으로 인해 실행 가능합니다.

자신에게 호의를 베풀고 SASS에 크게 의존하면 스타일링에 대한 많은 고민을 덜 수 있습니다.

JWP2020 CSS SASS