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.
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
Top comments (1)
I just read in npmjs that node-sass is deprecated and will be removed in a future major version.
If this is true then does that mean that we don't need to do "install -g node-sass" any more?
Can we still build projects without node-sass?