Zurb Foundation SASS

I'm trying to use Web Workbench to compile the SASS version of Zurb Foundation to CSS. I'm familiar with LESS, not very familiar with SASS, and even less familiar with how Workbench compiles Zurb Foundation's SASS files to CSS.

In any case, I have an ASP.NET 4 web site in Visual Studio 2012 with the latest Web Workbench. It handles my existing LESS files just fine. And it appears to handle the SCSS files okay. But I'm having a problem with the "_modular-scale.sass" file required by Zurb.

(1) I downloaded the latest Zurb Foundation 3.1 from Github, and copied the SASS version of it into a folder in my project. Check.

The Zurb Foundation 3.1 foundation.scss file consists of the following:

@charset "UTF-8";

// Foundation Features
// =============

@import "compass/css3";

@import "modular-scale";

@import "foundation/functions/all";

@import "foundation/settings";

@import "foundation/mixins/all";

@import "foundation/common/base";

@import "foundation/components/grid", "foundation/components/modules/all";

(2) Okay, so it needs Compass, whatever that is. I download the latest Compass from Github and put it into the compass/css3 folder that Zurb Foundation expects. Check.

(3) Almost there. It also needs this thing called Modular Scale. So I download the latest version of it from Github and put the _modular-scale.sass file where Zurb Foundation expects it.

Great. Everything appears to be in place. Except, when I load and save foundation.scss in Visual Studio 2012 (in order to make Web Workbench compile everything to CSS), the following error is generated:

Syntax error: Undefined operation: "power(golden_ratio(), 1) times 14px 44px".
        on line 42 of S:/cvsroot/websites/com.mysite/solution/WebRoot/_libs/zurb-3.1/scss/_modular-scale.sass
        from line 12 of S:\cvsroot\websites\com.mysite\solution\WebRoot\_libs\zurb-3.1\scss\foundation.scss
  Use --trace for backtrace

I don't know why that is happening.

Can Web Workbench not properly compile everything (it appears to only have this one issue), or am I doing something wrong?

Any ideas? Any help at all would be greatly appreciated. Thank you!

Regards, Larry Antram

P.S. I'm using the latest nightly build of Web Workbench that I downloaded today.

Hi Larry,

We call out to the standard Sass compiler and that error is being generated by Sass so presumably either power() or golden_ratio() or that overload of the multiplication operators is not something which has been defined and is being understood by the compiler. Im wondering if perhaps a mixin is not being picked up correctly which contains these definitions?

Jeremy

You need the _math.sass from sassy-math-1.2. If you have a windows ruby install you can find it in gems.

Put this file in something like functions and include.

one other thing - the power function is called pow - you'll need to add an alias to power.

Hi, I've gotten Mindscape to support foundation. To to this I had to modify the Ruby193.zip template (AppData\Local\Microsoft\VisualStudio\10.0\Extensions\Mindscape\Mindscape Web Workbench\3.2.572.21753\CustomTool) In this file I manually added the needed gems from my main ruby folder( C:\Ruby193 )

However this is not a good approach, because I would have to manually keep this in sync whenever I update Web Workbench. Would it not be easier if the configuration for WW allowed the user to provide a custom path to an (external) ruby folder?

Did you just need to add the sassy-math gem? I would like to update our bundled gem set to include what is required to get this covered but the suggestion for an external Ruby path is a good one so I will look at adding in an option for this.

Thanks!
Jeremy

I added

• modular-scale ( 1.0.2 )
• sassy-math ( 1.2)
• zurb-foundation ( 3.1.1 )

However I'm not sure if the foundation gem was needed. The reason it is not enough to copy over the scss / sass files are that they are missing the Modules and functions, eg. the modular-scale.rb. As I see it we either need to be able have a folder where we can add the full gem packages, or just be able to use a custom folder.

Thanks for taking the time!

Thanks for the detail - I added sassy-math in last night so Ill look at adding in modular-scale into our Ruby bundle as well and see if thats enough to cover things.

As mentioned in the earlier post I will also be looking to add in the custom Ruby path option in the near future as well.

Thanks!
Jeremy

Sounds good, looking forward to testing it out!

Just an update to let you know that this is now in the nightlies. There is now an option under the Compilation section of the Web Workbench options for specifying a custom Ruby path. This will need to point to the bin folder of your Ruby installation. This installation will then be used for compilation (both Sass and Compass).

If you are using just Sass you will need the sass gem and its dependancies installed. If you are using Compass you will additionally need the compass gem and its dependancies installed.

Let us know once you have had a chance to use this with any feedback.

Thanks!
Jeremy

Awesome! I'll try it out and let you know if I have any problems!

Hi, I pulled the latest nightly build now, but I had/ have some issues:

1. On first start up of VS I was unable to get to either the project or the global setting screens. There were a VS dialog saying that there had been an exception, but I was unable to get the details.

2. After the second load of VS the settings was working again, but I was unable to find this path setting. Is it in the current build ( Nightly Build for 04 Nov 2012 - Mindscape.WebWorkbench.Integration-20121104.10.vsix ) ?

No sorry, I should have probably specified the build number! You will want 20121105 or later which was last nights build. The builds are uploaded at around midday GMT so you will want to grab the now current one :)

Jeremy

Ok, I see :-) I have downloaded the most recent version now, and it works just fine!

Thanks!!

Using my local ruby installation seems to make no difference when accessing SASS functions that Compass uses. I'm sure that I'm missing something simple here, but the sass convert function doesn't work. In fact no function that compiles using compass from the command prompt will work in the WW environment.

Is there some user guide that I've missed? Does anybody have Foundation working in WW? If so can you please explain the setup.

Using my local ruby installation seems to make no difference when accessing SASS functions that Compass uses. I'm sure that I'm missing something simple here, but the sass convert function doesn't work. In fact no function that compiles using compass from the command prompt will work in the WW environment.

Is there some user guide that I've missed? Does anybody have Foundation working in WW? If so can you please explain the setup.

Using my local ruby installation seems to make no difference when accessing SASS functions that Compass uses. I'm sure that I'm missing something simple here, but the sass convert function doesn't work. In fact no function that compiles using compass from the command prompt will work in the WW environment.

Is there some user guide that I've missed? Does anybody have Foundation working in WW? If so can you please explain the setup.

Hi,

I'm also trying to get Zurb Foundation up and running. I'm running the latest nightly (14/11/2012) and I can't find anywhere to specify a custom RubyGem path in the Options/Settings?

Cheers,

Dan

Hi,

I'm also trying to get Zurb Foundation up and running. I'm running the latest nightly (14/11/2012) and I can't find anywhere to specify a custom RubyGem path in the Options/Settings?

Cheers,

Dan

As I understand it, the options include a path to a local Ruby installation including all of its gems. I'm not sure that this is simply a path to it's gems. Perhaps the developer can clarify. The attached screenshot shows what I have in my settings...

I think the forum is on the fritz. Errors showing messages indicating no hard disk space, and a few asp.net debug screens to the same effect. Will post image when this is sorted.

Hi, You are using the same path as I have in my project, except for different drive. What error are you getting? Also have you tested the gems manually through the console?

Yes. I think I mentioned that I'm compiling css fine via compass on the command line.

I have finally figured out how to configure this and will share the setup for the benefit of other people.

Important point! The Web project must be opened using file system, not IIS, FTP or remote site. I haven't tested whether you can use a UNC share as the project location, but if you are not getting compass to compile after following the remaining steps double check the location of the project and if necessary move it to a location available on a local path. in the properties window with the projects selected, check that "opened URL" starts with file:// and not http:// Whichever way you create a new website, you can always open the website at its file location afterwards.

Use the "setup compass project" command This is available by right clicking on the website project. I'd like the developer to explain why projects fail to compile using the local Ruby install path when the project is set up manually, and exactly what's going on during the setup process.

If you've attempted to set up manually or for some reason it fails to detect the local Ruby install path then delete config.rb and WebWorkbench.mswwsettings and reapply the command. I found out that this doesn't reliably restore functionality and it looks like the config.rb file is not being read correctly at this point. Deleting any existing SASS folder as well as the two files above has restored functionality on the occasions that I tested the setup compass project command.

if you want to edit Zurb foundation files then copy the foundation SCSS Directory structure from either a download or by going to your Ruby gems install location and picking out the files and folder structure as shown in the SASS folder in the attached screenshot. If the foundation files are located in your project inside the sass folder then the locally installed Ruby gem will be ignored.

Add references in config.rb to required gems the listing is as follows:

# Require any additional compass plugins here.
require 'sassy-math'
require 'modular-scale'
require 'compass'
require 'zurb-foundation'

if you haven't already installed these gems then now is the time to do it.

There's one crucial setting I haven't covered so far which is in the WebWorkbench.mswwsettings file. If you don't have the setting node "IsCompassProject" then it won't work. In fact you don't need anything else in this file except the following:

<?xml version="1.0" encoding="utf-8"?>
<web-workbench>
  <setting name="IsCompassProject">True</setting>
</web-workbench>

In visual studio's menu, go to tools, options and find web workbench settings. In the compilations section you will note an entry for "Ruby installation path". This must point to your local Ruby install's bin folder. In my case this is "D:\Data\Ruby193\bin" to give you an idea of what you'll need to type in.

At this point, provided that you have edited foundation.scss (or whatever main SCSS file you are using to initiate the foundation compilation) so that paths to additional SCSS are valid, then opening and saving that file should initiate a successful build within visual studio.

If you look at the attached screenshot you'll see the completed structure including foundation files in my installation. The foundation.scss file looks like this:

@charset "UTF-8";
// You custom settings file to override Foundation defaults
@import "settings";

// Foundation Features
// =============

@import "modular-scale";

@import "compass/css3";

@import "foundation/functions/all";

@import "foundation/mixins/all";

@import "foundation/common/base";

@import "foundation/components/grid", "foundation/components/modules/all";

// Media Queries Overrides
@import "foundation/components/modules/mqueries";

if you are generating errors at this stage then, depending on the error you will need to double check the setup I've described here, the correct installation of the local Ruby gems and visual studio's IDE settings.

If you have definitely got everything set up as described and if you are getting errors relating to being unable to find modular scale then it's most likely because Web Workbench hasn't correctly set up the compass project. Delete or exclude anything connected with the install in the project including the sass-cache inside the project folder. Try restarting visual studio and attempting to setup compass again via Web workbench.

Foundation resources in my project are contained in a subfolder of plug-ins which you can see in the attached screenshot. Don't forget that you can target the stylesheets folder to automatically update foundation's CSS file. just as an example these are the relevant entries for my project structure in the config.RB file:

# Set this to the root of your project when deployed:
http_path = "/"
css_dir = "Plugins/Foundation/stylesheets"
sass_dir = "sass"
images_dir = "Plugins/Foundation/images"
javascripts_dir = "Plugins/Foundation/javascripts"

While youre looking at this file, you should modify the following to enable relative paths in the CSS

# To enable relative paths to assets via compass helper functions. Uncomment:
relative_assets = true

In conclusion, yes I have finally got web Workbench to play nicely with foundation but the setup is flaky at best and I suspect what is going on behind the scenes during the "setup compass project" command. The fact that almost nothing is documented has led to a very frustrating fortnight. Hopefully you won't have the same experience but if you do then post your experiences along with the compiler error and I may be able to give you a clue as to why this is happening.

Thanks for taking the time to post all that! I'm back in the office tomorrow, I will give that a go and report back if it works for me.

Works great! Thank you so much. :)

This didn't work for me. I can't find the WebWorkbench.mswwsettings file on my system. I also don't have the settings shown for locating the Ruby Path.

Are you using a Web Application? If so the settings are stored in the project file. The WebWorkbench.mswwsettings file is only created for Website projects.

For the Ruby Installation Path setting make sure you are using a nightly build as this change was made subsequent to the last gallery update.

Jeremy

Ok. I'm am trying to get this setup for an MVC 4 application.

I'll check my installation and make sure I'm using the latest nightly build.

City Slicker -- thanks for the documentation, this helped me a lot.

By installing the zurb foundation gem ("gem install zurb-foundation"), I found I didn't need any of the foundation files in my sass directory. Note that the gem "zurb-foundation" is Foundation 3; "ZURB-foundation" is Foundation 2.

Starting from scratch:

1. Installed ruby (http://rubyinstaller.org/)
2. Installed gems
   1. gem update --system
   2. gem install compass
   3. gem install sassy-math
   4. gem install modular-scale
   5. gem install zurb-foundation
3. Downloaded nightly build of Web Workshop Pro Right
4. clicked on Visual Studio project to "Setup Compass Project"
5. Set path to Ruby (from 1) in Mindscape options
6. Modified /config.rb (see below).
7. Added /ruby/oceSassFunctions.rb (see below, optional).
8. Added /sass/_my.foundation.settings.scss (see below).
9. Added /sass/my.foundation.scss (see below).

"my.foundation.scss" and "_my.foundation.settings.scss" are the only files in my /sass directory. Mindscape now compiles /stylesheets/my.foundation.css whenever my.foundation.scss changes.

/config.rb:

# Set this to the root of your project when deployed:
http_path = "/"
css_dir = "stylesheets"
sass_dir = "sass"
images_dir = "images"
javascripts_dir = "javascripts"

# You can select your preferred output style here (can be overridden via the command line):
# output_style = :expanded or :nested or :compact or :compressed

# To enable relative paths to assets via compass helper functions. Uncomment:
relative_assets = true

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

# If you prefer the indented syntax, you might want to regenerate this
# project again passing --syntax sass, or you can uncomment this:
# preferred_syntax = :sass
# and then run:
# sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv scss sass

# Require any additional compass plugins here.

# Required for zurb foundation
require 'sassy-math'
require 'modular-scale'
require 'compass'
require 'zurb-foundation'

# Custom local ruby function (optional)
require File.join(File.dirname(__FILE__), 'ruby/oceSassFunctions.rb')

/ruby/oceSassFunctions.rb

# credit to http://stackoverflow.com/questions/13022461/add-timestamps-to-compiled-sass-scss
module Sass::Script::Functions

    # return the current date-time as a string
    def timestamp()
        return Sass::Script::String.new(Time.now.to_s)
    end

    # return the current logged-on user's username
    def currentUser()
        return Sass::Script::String.new(ENV["USERNAME"])
    end

    # return the current machine name
    def currentMachine()
        return Sass::Script::String.new(ENV["COMPUTERNAME"])
    end

end

/sass/_my.foundation.settings.scss

/* ========================================================
*  OCE Foundation Settings 
*  Theme: default
*  These settings override Zurb Foundation defaults  
*  see (/zurb-foundation-3.2.3/scss/foundation/_settings.scss) in gems
*   v0.0.1
* ========================================================*/ 

$headerFontFamily: "Open Sans", sans-serif;
$headerFontWeight: 500;

# add more overrides....

/sass/my.foundation.scss

// functions require reference to /ruby/oceSassFunctions.rb in config.rb

/*! =================================================================
*  This file .css is autogenerated from /sass/my.foundation.scss
*  Setting changes may be made in /sass/_my.foundation.settings.css
*
*  CSS Compiled: #{timestamp()}   
*  Compiled by: #{currentUser()}
*  Compiled on: #{currentMachine()}
*
*  v0.0.001
* ==================================================================
*/

// my custom settings
@import "my.foundation.settings";

// builds zurb foundation from gem
@import "foundation";

"For the Ruby Installation Path setting make sure you are using a nightly build as this change was made subsequent to the last gallery update."

The current download page shows last updated 10/5/2012 - which does not have the WebWorkbench.mswwsettings file nor have the settings shown for locating the Ruby Path.

Please can this change be made available as a standard download?

The .mswwsettings file is only used if you are using a website rather than a web application as there is no project file to store the settings against. The same settings that are stored in the mswwsettings file will be in the project file (.csproj or .vbproj).

We are aiming to get the next major release of WW out soon and we are currently just working through testing the new installer process with beta users so we will be updating the gallery version again with that update once its released. All going well this will be out in the next few weeks.

Jeremy

Thanks for the prompt reply Jeremy!

All I am trying to do at the moment is to get Zurb Foundation to play nice with Visual Studio.

I was following City Slicker's great instructions up until the part where I realized that I did not have the option to input a Ruby installation path - is this only available via the nightly builds download?

Yes this is currently only available in the nightlies.

Jeremy

I've faced the same issue. I find it easier to set up the Compass project manually via the command line (using a customized Gemfile and config.rb), and just use Mindscape for editing. First, install bundler using the following command (needed to freeze gem version if you're like me and have multiple projects using different versions of Foundation:

gem install bundler

Put this line in your Gemfile

 gem 'zurb-foundation','3.5.2'  


    #(or 4.1, whichever version you are using, for Foundation 2, use gem 'ZURB-foundation') 


    # optionally, you can also set the ruby version in the Gemfile 


    # ruby "1.9.3"

and set your configuration options in config.rb, then run the following commands:

bundle install --path vendor 


bundle cache 


bundle exec compass create . -c config.rb -r zurb-foundation --using foundation

The first command installs your foundation gems (including dependencies) to a folder named vendor in the current directory, and freezes the version (and your ruby version, if that's also set) is frozen, as major gem upgrades have historically broken projects using zurb-foundation.

The second command caches local copies of your gems (useful if you are working on a project with multiple designers).

The third creates the project in the current directory using the config file you've set up (I like to specify which directories are used, if you don't, compass will create one for you.), requires the foundation gem (this can optionally be set in the config.rb file instead) and tells compass to use foundation as it's framework.

I've also created a bat file with the command

bundle exec compass watch

and installed it as an external tool to compile while I'm working (the external tool must be run after selecting your Compass project folder in VS- alternately, this command can be run from the command line instead of as an external tool, the only difference being where your command-line output ends up). Remember to turn off compiling in the Mindscape options for each new file, as it will automatically try to compile each new scss file as a new css file. It may seem like a lot of hoops to jump through, but it creates a rock-solid environment in which to work with Foundation in Visual Studio- I've used this setup in three professional projects so far without issue.

Ah that's brilliant, thank you for sharing.

No problem! Sorry for running the commands together, I haven't quite figured out multi-line code in this forum yet.

Foundation 4 using Sass for Asp.net MVC can now be installed via nuget package. Please see http://www.responsivemvc.net/Foundation#Foundation4Sass for details.

This package has been fully tested with Web Workbench. Compass works too but is optional.

I've tried that with 3.2, but had better luck manually configuring when adding Foundation to an existing project. I haven't tried setting it up for a new project. Will have to check it out using 4. Thanks for the heads up!