how to add sass to an existing WordPress Theme

sassify.md

npm install --save-dev jshint gulp-jshint

Base directory: theme/

• Copy latest gulpfile.js

• search for

    proxy: 'http://domain.dev/', 
  

  and change the domain

• copy package.json

  search for "name" and replce it

• mkdir assets/styles

• create assets/styles/main.scss

• mkdir dist/, dist/scripts

• create dist/scripts/main.js //TODO: we are gulping js yet so we just edit the scripts on dist

• npm install -g gulp

• npm install

• add to functions

    function load_child_files() {
        wp_register_style( 'child_style', get_stylesheet_directory_uri() . '/dist/styles/main.css'  );
        wp_enqueue_style( 'child_style' );
  
        wp_register_script('child_script', get_stylesheet_directory_uri() . '/dist/js/main.js', array('jquery'), true );
        wp_enqueue_script('child_script');
    }
    add_action('wp_enqueue_scripts', 'load_child_files');
  
    function child_body_classes($classes) {
        $classes[] = 'dinersifavors';
        return $classes;
    }
    add_filter('body_class','child_body_classes');
  

#optional

npm install bower -g

#example files

**main.js **

jQuery(function($){

});

main.scss

 // primary color declaration: this colors should not be used on the css rules
$white: 	hsl(39, 100%, 100%);
$gold:  	hsl(39, 70%, 51%);  	//	#da9c2b
$burnt-gold: hsl(39, 85%, 61%);
$grey:  	#d6d6d6;
$black: 	hsl(39, 0%, 0%);


// secondary color declaration: this declarations should only use colors defined above
$background-color:	$white;
$primary-color: 	$gold;
$secondary-color: 	$grey;
$text-color:		$black;
$link-color: 		$burnt-gold;



/*
REVERT GENERIC DEFAULTS
*/
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}