One of the things I've been meaning to do for a while is learn to use SASS. The problem being that I've never had an opportunity, usually I am developing new features for Lovefresh and the primary focus then is getting them working. The CSS files have been built up since before I began majorly working on them, and despite there being converters built into the Gem, the idea of redoing all that CSS never appealed to me. 

My mother has asked me to do her a site for her new cake business plans. Finally having a fresh slate, I gave it a go. My god! It's like the coding mental revolution that was HAML. Nesting code to avoid the mindless repetition, using Mixins to produce decent CSS3 without copying and pasting webkit, moz and sometimes o is just damn awesome. Here are some examples:

@mixin border-radius ($radii) {
              	-webkit-border-radius: $radii;
              	-moz-border-radius: $radii;
              	-ms-border-radius: $radii;
              	-o-border-radius: $radii;
              	border-radius: $radii;
              }
              
              @mixin box-shadow($x, $y, $s: 0, $c: rgba(255,255,255,0.35)) {
              	-webkit-box-shadow: $x $y $s $c;
              	-moz-box-shadow: $x $y $s $c;
              	-ms-box-shadow: $x $y $s $c;
              	-o-box-shadow: $x $y $s $c;
              	box-shadow: $x $y $s $c;
              }

I'll get round to converting everything else eventually. As well as uploading all my Scotland photos and writing that up. Time is going a million miles an hour, predictably when heading towards exam results day...

Anyway, here's what nesting and parent selectors look like:

#actions {
              	width:320px;
              	margin-left:14px;
              	float:left;
              	a {
              		width:320px;
              		overflow:hidden;
              		text-indent:999px;
              		margin-bottom:15px;
              	}
              	#order-now {
              		background-position:-320px 0;
              		&:hover {
              			background-position:-320px -50px;
              		}
              		&:active {
              			background-position:-320px -100px;
              		}
              	}
              	#contact {
              		background-position:0 0;
              		&:hover {
              			background-position:0 -50px;
              		}
              		&:active {
              			background-position:0 -100px;
              		}
              	}
              }

And with that done I'm going to go sweat some more in the sudden humidity spike.