Tricky

Sass

It's official… I've been REALLY nerding out on Sass… It's a cozy love hate thing.

Anyway.

Can you guess the resulting output of this Sass snippet?

.big-margins {
 background-color:purple;
 margin:100px;
}
.bar {
 background-color:red;
 margin:10px;
}
.foo {
 @extend .bar;
 @extend .big-margins;
 padding:0px;
}

Since we extended big margins last we might be under the impression that big-margins would win. That's the CSS way right?

Not necessarily. It depends on which extended definition comes first.

The output is...

.big-margins, .foo {
  background-color: purple;
  margin: 100px; }

.bar, .foo {
  background-color: red;
  margin: 10px; }

.foo {
  padding: 0px; }

I figured this out when it wasn't generating the output I thought it should...

.big-margins {
 background-color:purple;
 margin:100px;
}

.bar {
 background-color:red;
 margin:10px;
}

.foo {
  background-color: purple;
  margin: 100px;
  padding: 0px;
}

At first I was like "wow how smart!"

But now that I know about this I like the way I think its supposed to be better.

THE FIDDLE