sass compile error with CodeKit

[cucocreative]

Hi, thanks for the great WP theme.

I've been coding in css and thought it's about time to look into sass. I use CodeKit to autorefresh my browsers when I save any files I'm working on – it will also compile the scss files when you save them, but it currently errors. It will compile Gumby without issue (now anyway, after a lot of googlefoo), but doesn't like GumbyPress. I'm using your latest version using Gumby2.6.

Have you come across CodeKit? Could you shed any light onto this problem?

The error in the log is:
Syntax error: File to import not found or unreadable: modular-scale.
Load paths:
/Applications/MAMP/htdocs/wordpress/wp-content/themes/12_16_grid/sass
/Applications/CodeKit.app/Contents/Resources/engines/bourbon/bourbon/app/assets/stylesheets
/Applications/CodeKit.app/Contents/Resources/engines/neat
/Applications/MAMP/htdocs/wordpress/wp-content/themes/12_16_grid/bower_components/foundation/scss
on line 21 of /Applications/MAMP/htdocs/wordpress/wp-content/themes/12_16_grid/sass/gumby.scss
Use --trace for backtrace.

Line 21 of gumby.scss is @import "modular-scale";

Thanks for any advice you could give me.

[tubiz]

@cucocreative thanks for making use of my starter theme. WIll release an update that am sure will fix the issue you are experiencing in the next 24 HRS.
Thanks

[cucocreative]

okay, brilliant. Thanks for the help – I'll keep an eye out for the update.

[tubiz]

@cucocreative I just pushed an update to the theme.
Hopes it fix the issue you are having.

If it doesn't then you have to install modular-scale gem

[cucocreative]

Thanks for the update, although I'm still getting the "Syntax error: File to import not found or unreadable: modular-scale" error, even after installing modular-scale 2.0.4 & 1.0.6. The dev of CodeKit told me that he will bundle modular-scale – so I'll have to wait for the next release to see if that will help.

[ghost]

I'm getting a similar error, but I don't get it when I compile the SASS from the regular Gumby Framework.

Syntax error: File to import not found or unreadable: modular-scale.
              Load path: /
        on line 20 of /Applications/AMPPS/www/ryonet/14RYO007-wordpress/sass/gumby.scss
  Use --trace for backtrace.

[tubiz]

@indadam you have to install modular-scale gem to fix this error.

[ghost]

@tubiz I do have it installed, like I said, it works with the regular Gumby Framework, it's just not working with the GumbyPress. I've dug through the SASS and I can't see why it's not linking.

[tubiz]

@indadam so sorry about this will have to troubleshoot this further.
Will give you an update in the next 48 HRS max.

[samotta93]

Hello @tubiz, it's really amazing your job.

With me, the same problem. I'm using Scout to compile SASS and show the error bellow:

error gumby.scss (Line 20: File to import not found or unreadable: modular-scale.
Load paths: C:/wamp/www/wordpress/wp-content/themes/_siga/sass C:/Program Files (x86)/Scout/vendor/gems/gems/compass-0.12.2/frameworks/blueprint/stylesheets C:/Program Files (x86)/Scout/vendor/gems/gems/compass-0.12.2/frameworks/compass/stylesheets C:/Program Files (x86)/Scout/vendor/gems/gems/compass-960-plugin-0.10.4/stylesheets C:/Program Files (x86)/Scout/vendor/gems/gems/yui-compass-plugin-0.3/stylesheets C:/Program Files (x86)/Scout/vendor/gems/gems/compass-h5bp-0.0.5/stylesheets C:/Program Files (x86)/Scout/vendor/gems/gems/zen-grids-1.2/stylesheets Compass::SpriteImporter) identical gumby.css

Some news about that? Thank you.

[tubiz]

@samotta93 so sorry for replying late. I will troubleshoot this further and make sure it is fixed once and for all.
Thanks for making use of my starter theme.

[dennisSmidswater]

I found a (sort of) solution to this. For me (i'm not an expert) it worked to create a config.rb in the root of you project with this code:

extensions_dir = "wp-content/themes/YOURTHEMENAME/sass/extensions"
Compass::Frameworks.register('modular-scale', :path => File.expand_path("#{extensions_dir}/modular-scale"))

http_path = "/"
css_dir = "wp-content/themes/YOURTHEMENAME/css"
sass_dir = "wp-content/themes/YOURTHEMENAME/sass"
images_dir = "wp-content/themes/YOURTHEMENAME/imgs"
javascripts_dir = "wp-content/themes/YOURTHEMENAME/js"
fonts_dir = "wp-content/themes/YOURTHEMENAME/assets/fonts"

output_style = :compressed
environment = :production
color_output = false

That worked for me!

[ghost]

Thank you @dennisSmidswater, I'll give that a shot.

[cucocreative]

Thanks @dennisSmidswater, that did the trick.
Although if your project root is a theme's actual folder, you just need the following - which I'm sure you know.

extensions_dir = "sass/extensions"
Compass::Frameworks.register('modular-scale', :path => File.expand_path("#{extensions_dir}/modular-scale"))

http_path = "/"
css_dir = "css"
sass_dir = "sass"
images_dir = "imgs"
javascripts_dir = "js"
fonts_dir = "assets/fonts"

output_style = :compressed
environment = :production
color_output = false 

NB CodeKit was latest version 2.0.6 - which still errored without the above included.