CODEWITHSUNDEEP
csssass
userMod2
userMod2

Reputation: 8960

Basic SASS - Nesting and HTML Syntax

I just started using SASS however I can't seem to find a clear answer/example for this.

Say I have:

<img class="socialIcons" src="/images/facebook.png"/>
<img class="socialIcons" src="/images/google.png"/>

I now want to have some additional styles for Facebook and Google - is there some clever SASS syntax I can use for example so I get:

<img class="socialIcons-facebook" src="/images/facebook.png"/>
<img class="socialIcons-google" src="/images/google.png"/>

And in my SASS use:

.socialIcons {
  max-height: 30px;
  padding-right: 10px;

  &.facebook {
    background: blue;
  }
}

So that it adopts the general socialIcons style as well as Facebook.

Can't seem to figure the syntax.

Thanks.

Upvotes: 0

Views: 48

Answers (1)

Tony Chapman
Tony Chapman

Reputation: 88

You mean this?

<img class="socialIcons facebook" src="/images/facebook.png"/>
<img class="socialIcons google" src="/images/google.png"/>

The '&' syntax will match an element that has both the outer class and the class with the & selector. You can overwrite the 'socialIcons' class with the more specific nested selector. No need to change the Sass.

Upvotes: 3

Related Questions