Blake Bowen OSUblake

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

	DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE
	Version 2, December 2004

	Copyright (C) 2011 Jed Schmidt <http://jed.is>

	Everyone is permitted to copy and distribute verbatim or modified
	copies of this license document, and changing it is allowed as long
	as the name is changed.

	DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE

	Consolidated lists of CSS properties that are inherited by default.
	Taken from http://www.w3.org/TR/CSS21/propidx.html
	--------------------------------------------------------------------

	One item not in the list was "text-decoration" which affects child elements. A few new properties (text-shadow) also affect child elements

	List

	azimuth
	border-collapse

	/jslint plusplus: true, vars: true, indent: 2 /

	/*
	convertPointFromPageToNode(element, event.pageX, event.pageY) -> {x, y}
	returns coordinate in element's local coordinate system (works properly with css transforms without perspective projection)

	convertPointFromNodeToPage(element, offsetX, offsetY) -> {x, y}
	returns coordinate in window's coordinate system (works properly with css transforms without perspective projection)
	*/

	// knockout 2.2.1

	ko.utils.arrayFilter = function (array, predicate) { /* .. */ }

	ko.utils.arrayFirst = function (array, predicate, predicateOwner) { /* .. */ }

	ko.utils.arrayForEach = function (array, action) { /* .. */ }

	ko.utils.arrayGetDistinctValues = function (array) { /* .. */ }

	/*
	* insertAdjacentHTML.js
	* Cross-browser full HTMLElement.insertAdjacentHTML implementation.
	*
	* 2011-10-10
	*
	* By Eli Grey, http://eligrey.com
	* Public Domain.
	* NO WARRANTY EXPRESSED OR IMPLIED. USE AT YOUR OWN RISK.
	*/

	DO WTF YOU WANT TO PUBLIC LICENSE
	Version 2, December 2004

	Copyright (C) 2011 Alexey Silin <[email protected]>

	Everyone is permitted to copy and distribute verbatim or modified
	copies of this license document, and changing it is allowed as long
	as the name is changed.

	DO WTF YOU WANT TO PUBLIC LICENSE

	<!doctype html>
	<html>
	<head>
	<title>Resolution independent rendering of Bezier curves in WebGL</title>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<script src="glMatrix-0.9.6.min.js"></script>

	<script id="shader-vs" type="x-shader/x-vertex">
	attribute vec3 aVertexPosition;
	attribute vec2 aBezierCoord;

	/**
	* supplant() does variable substitution on the string. It scans through the string looking for
	* expressions enclosed in { } braces. If an expression is found, use it as a key on the object,
	* and if the key has a string value or number value, it is substituted for the bracket expression
	* and it repeats.
	*
	* Written by Douglas Crockford
	* http://www.crockford.com/
	*/
	String.prototype.supplant = function (o) {

	/*
	*
	* A simple JavaScript dependency injection container
	* By Monroe Thomas http://blog.coolmuse.com
	*
	* http://blog.coolmuse.com/2012/11/11/a-simple-javascript-dependency-injection-container/
	*
	* MIT Licensed.
	*
	* Unit tests can be found at https://gist.github.com/4270523