Overriding Foundation variables in _settings.scss

[tnog]

First of all, thanks for your work developing this framework; it's been incredibly helpful to me in developing several sites now, as well as getting me up-to-speed on SASS.

With that said, I've tried to override the Foundation variables in the accompanying scss/_settings.scss file but it doesn't seem to work for me.

// Settings file to override Foundation variables

// You can find the variables for each component at the bottom of their
// doc page. We tried to name them to where they'd make sense just by reading them.
// Go to http://foundation.zurb.com/docs/ to find what you need.

$block-grid-default-spacing: 15px;

/* Typography */
$header-font-family: "myriad-pro", sans-serif;
$header-font-color: #635F5F;
$anchor-font-color: #F47F75;
$anchor-font-color-hover: #F47F75;

/* Navigation */

$topBarBgColor: none;

/* Slideshow */
$orbit-caption-bg: rgba(255,255,255,0.6);
$orbit-caption-font-color: #ddd;

Is there something that I'm missing? This seems to be the correct file but it just doesn't work.

Oh, FWIW I'm also developing locally; using 'ruby 1.9.3p392 (2013-02-22 revision 39386) [x86_64-darwin10.8.0]' and have installed all the requisite gem files.

Thanks,

Tak

[wltgreenwood]

This looks fine. So it might be a problem with your setup.

I assume your are importing the _settings.scss file in the style.scss file. Are you importing the settings file before you import Foundation?

Are you including the reverie_sass_style.php instead of reverie_css_style.php?

Those are the only things I can think of off the top of my head.

[tnog]

Thanks for the follow up. The issue was not with the existing code! I realized my mistake: I was using Live Reload to update the CSS in the child theme that I was working on, but wasn't monitoring changes in the parent theme.

If anyone's interested though in using SCSS/Compass for child themes here's what I did:

In my child theme folder I created the following structure for my scss files, copying reverie's style.scss file over as well:

scss/ style.scss -partials/ --_base.scss --_settings.scss

and also mirrored reverie's lib and css folder structure, I copied the enqueue-sass.php file.

lib/ -enqueue-sass.php

The partials folder stores both the _base.scss file (where I create my own, and import any other mixins, and define my theme's variables) and a copy of the _settings.scss where I customize foundation's global variables and mixins.

I customized enqueue-sass.php to properly enqueue my childtheme's css file, like reverie, by using get_stylesheet_directory_uri()

function redter_sass_style()
{
    // Register the main style
    wp_register_style( 'redter-stylesheet', get_stylesheet_directory_uri() . '/css/style.css', array(), '', 'all' );
    wp_enqueue_style( 'redter-stylesheet' );
}
add_action( 'wp_enqueue_scripts', 'redter_sass_style' );
?>

At the top of my childtheme's scss/style.scss file I commented out/removed the following lines:

// import normalize, stay at top
@import "normalize";

// Global Foundation Settings
@import "settings";

// Comment out this import if you are customizing you imports below
@import "foundation";

Since it's unnecessary to import these into the childtheme's stylesheet, since they're already called in the parent, and replaced them with my base, and any additional scss files necessary for my project:

// Import childtheme variables and mixins
@import "partials/base";

// Import custom font-icons
@import "icons/icons";

// Import plugin customizations
@import "plugins/woocommerce";

And finally, the only customization that I had to make to the parent, reverie theme (which somewhat overrides the reason to use a child theme, but simple enough, that I consider it easy to add when I pull updates from the repository to my reverie submodule) is to the style.scss file:

/* Welcome and glad you are using Reverie.
 * This is the main stylesheet loaded by default.
 * Edit the file and have fun.
 * http://themefortress.com/reverie */

// import normalize, stay at top
@import "normalize";

// Global Foundation Settings
//@import "settings";
// Childtheme directory settings file specified here to override reverie default
@import "../../childtheme/scss/partials/settings";

// Comment out this import if you are customizing you imports below
@import "foundation";

I had to override reverie's _settings.scss file with the copy in my childtheme's scss/partials/ folder.

If anyone's found an easier or more elegant way to use SASS with a childtheme please let me know.

Thanks,

Tak

[ghost]

tnog,

Any chance you can update this process for Reverie 5? I am still struggling to get all the components in the right place so that I can have a child theme and use SCSS. Perhaps I should just abandon child themes? Any insight would be very helpful.

thanks,

/jk

[NRG-R9T]

I avoid child themes because they are very performance hungry. with the power of SCSS you can create a seperate file for your customized stylesheets.

[ghost]

NRG-R9T,

Thanks for your comment. I had never heard that child themes were so hungry. Perhaps that is the best answer not use child themes. It just seems that the WP community is always promoting them. I guess the only downside is that you have to be careful to make backups of your work and make sure you don't overwrite the changes in the theme. Are there any other best practices for directly editing the parent theme? Do you keep notes on what you modify?

[NRG-R9T]

The load times with a reverie child theme and without where roughly 10 to 1 the last time I checked. you can measure the theme's load time with the plugin performance profiler: http://wordpress.org/plugins/p3-profiler/

For "modification notes" you are here at one of many right places of "distributed version control systems" (D-VCS) or any VCS to use, so you can verify every change in the code and keep track of it over time. we use DokuWiki for the main documentation on a higher level.