Ampersand VS @extend, do the same thing?

Hi Samantha,

Not quite. The ampersand is essentially a placeholder for the containing selector when nesting psuedo class properties, parallel class or ID selector properties, or using various combinators. For instance, instead of:

nav{}

nav.primary{}

nav.secondary{}

nav > ul{}

You could combine them:

nav {
   &.primary{}

   &.secondary{}

   & > ul{}
}

So it's not necessarily that the ampersand enables any sort of inheritance, but rather works more like a shorthand allowing you to group and nest style properties a bit. You can get pretty fancy with what you do with the ampersand. I highly recommend giving this CSS-Tricks article about it a read.

Meanwhile. @extend functions more like creating a comma-separated list of selectors and applying the same CSS rules to each of them. Instead of:

nav,
header,
footer {
     /*Some Styles*/
}

You'd instead do:

nav {
   /*Some Styles*/
}

header {
   @extend nav;
}

footer {
   @extend nav;
}

Both of these will output the same thing. Use cases vary, but I often find mixins way more useful. Speaking of, here's another relevant CSS-Tricks article for more information.