How to Compile SASS in a Wordpress Child Theme?

Question

I am trying to figure out how to compile SASS in a child theme and I can't figure out what I am doing wrong.

I built a parent theme based on jointsWP. Here is the file structure for the library of the parent theme:

Then I built a child theme. Here's the file structure for the library of the child theme:

In the root of my child theme, I have a style.css with the necessary child theme comments:

/*
 Theme Name:   UIC
 Theme URI:    http://slamagency.com
 Description:  Child theme of the SLAM! theme for UIC.
 Author:       Megan Carroll
 Template:     slam-theme_v1
 Version:      1.0.0
 Tags:         light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
*/
/* =Theme customization starts here
-------------------------------------------------------------- */

@import url("../slam-theme_v1/css/style.css")

Then in Library > SCSS > style.scss, I have the following code:

@import "http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,700italic,400,300,700";

//
// IMPORTING STYLES
//

// Load SLAM! Theme parent SCSS.
@import url("../slam-theme_v1/scss/style.scss");

// import mixins
@import "mixins";

// import foundation overrides
@import "settings";

// import child colors
@import "colors";

EDIT: To clarify, when I add something in style.scss, it does compile to style.css. But if I make any changes to _settings.scss, nothing happens. I'm using Foundation, so I'd like to be able to edit the Foundation variables in _settings.scss. What am I doing wrong?

EDIT 2: Here is the code that is in my config file for my child theme:

# 1. Set this to the root of your project when deployed:
http_path = "/"

# 2. probably don't need to touch these
css_dir = "../css"
sass_dir = "./"
images_dir = "../images"
javascripts_dir = "../js"
environment = :development
relative_assets = true


# 3. You can select your preferred output style here (can be overridden via the command line):
output_style = :expanded

# 4. When you are ready to launch your WP theme comment out (3) and uncomment the line below
# output_style = :compressed

# To disable debugging comments that display the original location of your selectors. Uncomment:
# line_comments = false

# don't touch this
preferred_syntax = :scss

EDIT 3: Requested enqueue code from parent theme:

// loading modernizr and jquery, and reply script
if (!function_exists('slam_scripts_and_styles')) { 
function slam_scripts_and_styles() {
  global $wp_styles; // call global $wp_styles variable to add conditional wrapper around ie stylesheet the WordPress way
  if (!is_admin()) {
    $theme_version = wp_get_theme()->Version;

    // removes WP version of jQuery
    wp_deregister_script('jquery');

    // loads jQuery 2.1.0
    wp_enqueue_script( 'jquery', get_template_directory_uri() . '/bower_components/foundation/js/vendor/jquery.js', array(), '2.1.0', false );

    // modernizr (without media query polyfill)
    wp_enqueue_script( 'modernizr', get_template_directory_uri() . '/bower_components/foundation/js/vendor/modernizr.js', array(), '2.5.3', false );

    // adding Foundation scripts file in the footer
    wp_enqueue_script( 'foundation-js', get_template_directory_uri() . '/bower_components/foundation/js/foundation.min.js', array( 'jquery' ), $theme_version, true );

/*
    // register main stylesheet
    wp_enqueue_style( 'slam-stylesheet', get_template_directory_uri() . '/library/css/style.css', array(), $theme_version, 'all' );
*/

    // register foundation icons
    wp_enqueue_style( 'foundation-icons', get_template_directory_uri() . '/library/css/icons/foundation-icons.css', array(), $theme_version, 'all' );

    // comment reply script for threaded comments
    if ( is_singular() AND comments_open() AND (get_option('thread_comments') == 1)) {
      wp_enqueue_script( 'comment-reply' );
    }

    //adding scripts file in the footer
    wp_enqueue_script( 'slam-js', get_template_directory_uri() . '/library/js/scripts.js', array( 'jquery' ), $theme_version, true );

    /*
    I recommend using a plugin to call jQuery
    using the google cdn. That way it stays cached
    and your site will load faster.
    */
    wp_enqueue_script( 'slam-js' );

  }
}
}

Earlier in the parent functions there is this:

// enqueue base scripts and styles
add_action('wp_enqueue_scripts', 'slam_scripts_and_styles', 999);

Answer 1

The SCSS file in my parent theme

'theme-name/assets/scss/style.scss'

@import "base/fonts";
@import "variables/all";
@import "underscores/style";
@import "wordpress-overrides";
@import "inc/init";

The SCSS file in my child theme

'theme-name-child/assets/scss/style.scss'

/*
Theme Name:   Theme Name Child
Theme URI:    
Description:  Theme Name Child Theme
Author:       Theme Name, Co.
Author URI:   
Template:     ow
Version:      1.0.0
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Tags:         responsive-layout, accessibility-ready
Text Domain:  my-name-theme-child
*/


/* My Name Parent Theme Styles */
/* --------------------------- */
@import "../../../theme-name/assets/scss/style";



/* My Name Child Theme Styles */
/* -------------------------- */

/* Base */
@import "base/fonts";
@import "variables/all";
@import "base/mixins";
@import "base/base";

/* Templates */
@import "templates/template-menu";

/* Inc */
@import "inc/init";

I compile 'theme-name-child/assets/scss/style.scss' into 'theme-name-child/style.css'

Answer 2

To summarize our findings from our comments & chat:

• Copy the entire sass directory into the child theme. Then when you edit a variable, everything gets recompiled.
• In the child theme, don't import the styles from the parent theme since we're now recompiling in the child theme.
• Since in this case there was an enqueue statement in the parent theme loading the style, we need to dequeue that style in the child theme. And you need to set the priority of the hook so that your dequeue gets called AFTER the enqueue (which had a priority of 999).

The code:

function uic_styles() { 
  wp_dequeue_style( 'slam-stylesheet' ); 
  wp_enqueue_style( 'slam-stylesheet', get_template_directory_uri() . '/library/css/style.css' ); 
  wp_enqueue_style( 'uic-styles', get_stylesheet_directory_uri() . '/library/css/style.css' ); 
} 
add_action( 'wp_enqueue_scripts', 'uic_styles', 1000 );