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