I’ve been working with Ionic and Angular for so long that to me it feels like nesting selectors like this is just a normal way to work with CSS:
Specifically, I mean being able to nest the paragraph tag selector within the chat-message class selector such that the rules for the paragraph will only apply to those that are a child of some element with the chat-message class.
However, this isn’t natively a feature of CSS, it’s a feature added by using SASS. To do this with standard CSS, you would need to manually write out the selector like this:
.chat-message p {
}When working with external style files, especially if you are using Ionic, then they are probably going to be SASS/SCSS files and you can use this nesting feature by default.
However, if like me you’ve recently switched to defining your styles inline (as in the image above) you will notice that this nesting does not work.
To enable support for SASS in inline styles, all you need to do is change this section in your angular.json file:
To set the inlineStyleLanguage to scss. Now you can happily continue using any features of SASS that you like when defining styles inline!