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);
To summarize our findings from our comments & chat:
The code:
The SCSS file in my parent theme
‘theme-name/assets/scss/style.scss’
The SCSS file in my child theme
‘theme-name-child/assets/scss/style.scss’
I compile ‘theme-name-child/assets/scss/style.scss’ into ‘theme-name-child/style.css’