CODEWITHSUNDEEP
cssangularsass
BobRoss
BobRoss

Reputation: 53

Sass extending isn't working with simple example

below is both simple sass code,an Angular 2 component accessing the sass code, and the rendered HTML. In my last span element, blueBig is not working as it should. I'm new to sass and I'm not sure why this simple example is not extending properly. Can anyone shed some light on this issue for me? 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

Rendered HTML

Rendered HTML

enter image description here

Upvotes: 1

Views: 884

Answers (1)

Tim Hettler
Tim Hettler

Reputation: 1256

I compiled your Sass locally and it appears to be authored correctly.

Without being able to see the rendered HTML, my guess is that Angular is converting camelcase blueBig into kebab-case blue-big. Try putting quotes around the classname, i.e.

<span [ngClass]="{'blueBig' : true}">

Upvotes: 1

Related Questions