Angular and Sass

One of the problems with Angular's View Encapsulation (where each component has it's own CSS style sheet) is that it's only good for minor adjustments and does not address deep styles! In fact; Angular has deprecated NGDeep, which got around this problem for a while. Read more here on avoiding ::ng-deep.

Angular 10 - Avoid using ::ng-deep (ngdeep)

John Peters ・ Aug 3 '20

#angular #typescript

SASS
The beauty of SASS is that it is designed around Specivity in mind. This means that if we specify the style structure correctly, we can reach into any element on the page and adjust at will. No more days and hours of trying to do it in the component style sheet.

Project should have a Core.scss style

If our projects use SASS (Core.scss) in the root directory, we have the ability to reach into any of our components as deeply as we want.

This casts light on styling reusable components. To start off, our Core.scss file should have a default style for each component.

Each Component Base Style

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;
  }
}

Each reused Component Adjustment

Followed by successive adjustments for reuse of that component.

//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;
    }
 }
}

Unavoidable Debt
Unfortunately, this problem in using SCSS in the root as described above is that we are creating huge monolithic structures. Even though they are segmented, it's super easy to have 2,000 lines of styling. Not perfect for maintenance but workable due to how SASS works.

Do yourself a favor, lean on SASS heavily it will save you a ton of styling heartache.

JWP2020 CSS SASS