Nick LaDart nladart

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

	<!DOCTYPE html>

	<!-- Helpful things to keep in your <head/>
	// Brian Blakely, 360i
	// http://twitter.com/brianblakely/
	-->
	<head>

	<!-- Disable automatic DNS prefetching.

	<?php

	/**
	* Custom "Download" custom type for tutorial on Jayj.dk
	*
	* @link http://jayj.dk/2011/download-cpt-wordpress
	*/

	add_action( 'init', 'jayj_create_download_post_type' );

	// http://paulirish.com/2011/requestanimationframe-for-smart-animating/
	// http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating

	// requestAnimationFrame polyfill by Erik Möller. fixes from Paul Irish and Tino Zijdel

	// MIT license

	(function() {
	var lastTime = 0;
	var vendors = ['ms', 'moz', 'webkit', 'o'];

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
	<title>Stripe Sample Form</title>

	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
	<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.8.1/jquery.validate.min.js"></script>
	<script type="text/javascript" src="https://js.stripe.com/v1/"></script>
	<script type="text/javascript">

	<?php
	/**
	* WordPress Query Comprehensive Reference
	* Compiled by luetkemj - luetkemj.com
	*
	* CODEX: http://codex.wordpress.org/Class_Reference/WP_Query
	* Source: http://core.trac.wordpress.org/browser/tags/3.3.1/wp-includes/query.php
	*/

	$args = array(

	<?xml version="1.0"?>
	<layout>
	<default>
	<!--Root/Default Layouts-->
	<reference name="root">
	<!--Appending Block-->
	<block type="page/html_breadcrumbs" name="breadcrumbs" as="breadcrumbs"/>
	</reference>

	<!--CSS and JS Files-->

	(function() {

	var script,
	scripts = document.getElementsByTagName('script')[0];

	function load(url) {
	script = document.createElement('script');
	script.async = true;
	script.src = url;
	scripts.parentNode.insertBefore(script, scripts);

	@charset "UTF-8";
	/*---------------------------------------------------------------
	IE78 - Zurb Foundation 4 Grid
	ˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍˍ

	https://gist.github.com/replete/7082477

	(an enhanced fork of https://gist.github.com/zurbchris/5068210 )

	1) Make sure $row-width-px = your max large breakpoint row width (e.g. 960px)

	{% if template contains 'product' %}
	<meta property="og:type" content="product">
	<meta property="og:title" content="{{ product.title \| strip_html \| escape }}">
	<meta property="og:category" content="{{ product.type }}" />
	{% for image in product.images limit:3 %}
	<meta property="og:image" content="http:{{ image.src \| product_img_url: 'master' }}">
	<meta property="og:image:secure_url" content="https:{{ image.src \| product_img_url: 'master' }}">
	{% endfor %}
	<meta property="og:price:amount" content="{{ product.price \| money_without_currency \| stip_html \| escape \| remove: ',' }}">
	<meta property="og:price:currency" content="{{ shop.currency }}">