Here we have a simple example of Sass code, an Angular 2 component that accesses the Sass code, and the rendered HTML. However, there seems to be an issue with the blueBig span element in the last part. As someone new to Sass, I am not sure why this basic example is not extending properly. Could anyone provide some insights on this problem? Thank you!
Angular2 Component
@Component({
selector: 'test',
template: `
<h1> testing sass</h1>
<span [ngClass]="{blue : true}">This should be blue</span>
<br>
<span [ngClass]="{big: true}">This should be big</span>
<br>
<span [ngClass]="{blue : true, big: true }">This should be big and blue</span>
<br>
<span [ngClass]="{blueBig : true}"> this should be big and blue as well</span>
`,
styleUrls: ['assets/scss/testing-component.scss']
})
Sass
.blue{
color:blue;
}
.big{
font-size: 200%;
}
.blueBig{
@extend .blue;
@extend .big;
}
HTML
https://i.stack.imgur.com/CrEud.png
Rendered HTML