Sanjib Adhya codegorrilla

Sans jQuery

Events

// jQuery
$(document).ready(function() {
  // code
})

⇐ back to the gist-blog at jrw.fi

Advanced SCSS

Or, 16 cool things you may not have known your stylesheets could do. I'd rather have kept it to a nice round number like 10, but they just kept coming. Sorry.

I've been using SCSS/SASS for most of my styling work since 2009, and I'm a huge fan of Compass (by the great @chriseppstein). It really helped many of us through the darkest cross-browser crap. Even though browsers are increasingly playing nice with CSS, another problem has become very topical: managing the complexity in stylesheets as our in-browser apps get larger and larger. SCSS is an indispensable tool for dealing with this.

This isn't an introduction to the language by a long shot; many things probably won't make sense unless you have some SCSS under your belt already. That said, if you're not yet comfy with the basics, check out the aweso

	/*
	* This work is free. You can redistribute it and/or modify it under the
	* terms of the Do What The Fuck You Want To Public License, Version 2,
	* as published by Sam Hocevar. See the COPYING file for more details.
	*/
	/*
	* Easing Functions - inspired from http://gizma.com/easing/
	* only considering the t value for the range [0, 1] => [0, 1]
	*/
	EasingFunctions = {

	@mixin box-shadow($top, $left, $blur, $color, $inset: false) {
	@if $inset {
	-webkit-box-shadow:inset $top $left $blur $color;
	-moz-box-shadow:inset $top $left $blur $color;
	box-shadow:inset $top $left $blur $color;
	} @else {
	-webkit-box-shadow: $top $left $blur $color;
	-moz-box-shadow: $top $left $blur $color;
	box-shadow: $top $left $blur $color;
	}