Menu icon Foundation
Using Foundation SASS with _s and Wordpress

Hello All,

I would like to start using SASS with foundation. I have experience using _S, foundation and wordpress but I have never used it with SASS. does anyone know what the proper workflow procedure is for this?

_s. underscoresFoundationSass

Hello All,

I would like to start using SASS with foundation. I have experience using _S, foundation and wordpress but I have never used it with SASS. does anyone know what the proper workflow procedure is for this?

This post has been closed. No new replies can be added.

Jonathan Urban over 4 years ago

Hi Harout,
I implemented a proper workflow in order to compile sass code in my Wordpress theme Picotto based on Foundation http://picotto-wp.urbanjonathan.com/
All CSS settings are managed in the advanced panel menu in WP. If a css change is detected when user save modifications, zurb's Foundation sass source are automatically compiled in order to apply change.
My workflow use also scssphp.

See you,
Jonathan

Harout over 4 years ago

Hello Jonathan,

The link cannot be found. Also could you make suggest the workflow process from beginning to end? I appreciate the help, thanks.

Jonathan Urban over 4 years ago

In my theme Picotto, I integrated a variable.scss file which contains all sass variables than you can manage in the admin panel. This file is included in other .scss file of Zurb's foundation. The compilation is triggered on each variable.scss change using the library scssphp.

For more details, you can download my theme http://picotto-wp.urbanjonathan.com/ cause it should be difficult to explain all workflow process.
See you.
Jonathan.

Rachel Vasquez over 4 years ago

You must be my mind reader - seriously. I just wondered the same thing recently and wrote a tutorial based on my experience. The assumption of the tutorial is you're not using any package managers though. Hope it helps:

http://rachievee.com/foundation-underscores-and-sass/

As for workflow - I have a master sass file that I include my partials like variables, helpers (mixins and modular classes), global and individual styles per page or part of site. It looks something like this:

@import "partials/variables";
@import "partials/helpers";
@import "partials/global";
@import "partials/homepage";
@import "partials/about";
/* And so on... */

I also cleaned up Foundation's Sass file so it only has what I needed versus using all the components. I explain how to do that in the tutorial.

In my functions.php I'm enqueueing the files in a specific order:

  wp_enqueue_style( 'theme-default' );   //the style.css in the theme folder's root
  wp_enqueue_style( 'theme-foundation-normalize' ); //foundation's normalize
  wp_enqueue_style( 'theme-foundation-css' ); //foundation's Sass output Css file
  wp_enqueue_style( 'theme-master' );  //my master pulling my variables/helpers/custom etc.

Hope that helps!

Harout over 4 years ago

Hello Rachel Vasquez, wonderful tutorial i have gotten working with scss amazing. The only issue i am running into are the nav bar stuff, basically how to get the top bar and the mobile menus working with wordpress and foundation? i appreciate the help thanks!

Rafi Benkual over 4 years ago

There is tons of information about that here: http://foundation.zurb.com/forum/posts/1214-foundation-5--wordpress