Skip to content

sass.md

Latest commit

 

History

History
82 lines (49 loc) · 3.38 KB

sass.md

File metadata and controls

82 lines (49 loc) · 3.38 KB

SASS

set it up here or here (and the other pages on this official Sass site)

sass features and benefits

This page is a very good read. Note: we're using the SCSS syntax:

what i do

once Sass is installed:

set up the directory structure and files

In WordPress, use the 'style.css' at the site root only for the Theme info:

/*
	Theme Name: Freight Shuttle International
	Description: This is a child theme created for the Genesis Framework
	Author: Texas A&M Transportation Institute (TTI Communications)
	Author URI: http://tti.tamu.edu/communications
	Version: 2.0.0
 
 
	Template: genesis
	Template Version: 2.0.0
 
	License: GPL-2.0+
	License URI: http://www.opensource.org/licenses/gpl-license.php
*/

/* and that's all for this file */

**NOTE**: if the site being worked on uses grunt, follow these instructions where different from below

Create the directory structure and initial Sass files: mkdir -p inc/scss/

Move all your CSS from the original site root style.css into inc/scss/style.scss (note the extension: .scss). Then you can begin the process of moving the CSS into separate Sass partials.

enqueue the new generated stylesheet

In your functions.php file, enqueue the inc/sass/style.css that will be dynamically created from your Sass files:

/** -------- Enqueue styles generated by Sass -------- */
add_action( 'wp_enqueue_scripts', 'fs_enqueue_styles' );
function fs_enqueue_styles() {
    wp_enqueue_style( 'scss-styles', get_stylesheet_directory_uri() . '/inc/scss/style.css', array(), '1.0', 'all' );
}

the genesis stylesheet

the first thing that happens in many child themes is the style.css file from the parent theme gets included. What I've done, and what can be discussed on a site-by-site basis, is follow what the Genesis Sample Theme does and copied the entire file into the child theme. I do this as _genesis.scss and @import it first among my partials.

workflow

  1. In one terminal, run sass --watch style.scss:style.css (memory tip: sasquatch) this will dynamically compile and update your enqueued CSS file whenever you save your SASS files.* When you're done, just type CTRL-C.

  2. In another terminal, work with your Git and theme files

*actually, I've added this to my '~/.bash_profile': alias sq="sass --watch style.scss:style.css" so I only need to type sq to start sass

recommendations

  • use many logically named partials (e.g., all media queries might go in _mediaqueries.scss [and in this case, imported last])
  • get fast with grep searching; e.g., in your /scss/ directory, grep -n "searchterm" * (add -r for recursive grep if you're in a directory with subdirectories you want to search)

questions?

documentation