Daniel McClintock dmcclintock

This post outlines a way to use Sass, Compass, and Grunt to maintain stylesheets for a WordPress parent and child theme.

Sass is useful for many reasons, but for our purposes, the two most helpful features are partials and variables. We'll also take advantage of the importPath setting of Compass and Grunt.

Comments and improvements are always welcome.

Step 1: Create your parent stylesheet

Create a new Compass project in your theme and style away. When you're finished, your theme directory (called parent here) might look something like this:

Sublime Text 2 - Useful Shortcuts

Tested in Mac OS X: super == command

Open/Goto

super+t: go to file
super+ctrl+p: go to project
super+r: go to methods

	// Brightness math based on:
	// http://www.nbdtech.com/Blog/archive/2008/04/27/Calculating-the-Perceived-Brightness-of-a-Color.aspx

	$red-magic-number: 241;
	$green-magic-number: 691;
	$blue-magic-number: 68;
	$brightness-divisor: $red-magic-number + $green-magic-number + $blue-magic-number;

	@function brightness($color) {
	// Extract color components

	<?php
	/**
	* Plugin Name: WooCommerce - List Products by Tags
	* Plugin URI: http://www.remicorson.com/list-woocommerce-products-by-tags/
	* Description: List WooCommerce products by tags using a shortcode, ex: [woo_products_by_tags tags="shoes,socks"]
	* Version: 1.0
	* Author: Remi Corson
	* Author URI: http://remicorson.com
	* Requires at least: 3.5
	* Tested up to: 3.5

	[{
	"id": "view",
	"children": [{
	"id": "layout",
	"children": [
	{
	"command": "set_layout",
	"caption" : "Custom: 3 Pane (2T 1B)",
	"mnemonic": "C",
	"args": {

	<?php
	/**
	* WARNING! THIS SNIPPET MAY BE OUTDATED.
	* The latest version of this snippet can be found in the Gravity Wiz Snippet Library:
	* https://github.com/gravitywiz/snippet-library/blob/master/gravity-forms/gw-limit-checkboxes.php
	*/
	/**
	* Limit How Many Checkboxes Can Be Checked
	* http://gravitywiz.com/2012/06/11/limiting-how-many-checkboxes-can-be-checked/
	*/

	# Sublime Text 3 - Useful Shortcuts

	Tested in Mac OS X: super == command

	Open/Goto
	_________
	- super+t: go to file
	- super+ctrl+p: go to project
	- super+r: go to methods
	- super+shift+p: command prompt