Foundation zurb, html css

Question

I am trying to learn how to use the foundation gem in a rails app. I scaffolded a simple todo application first, seeded the database and ran it in my local server without error. Next I added the foundation gem to my gem file:

source 'https://rubygems.org'


# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails', '4.2.0.beta2'
# Use sqlite3 as the database for Active Record
gem 'sqlite3'
# Use SCSS for stylesheets
gem 'sass-rails', '~> 5.0.0.beta1'
# Use Uglifier as compressor for JavaScript assets
gem 'uglifier', '>= 1.3.0'
# Use CoffeeScript for .js.coffee assets and views
gem 'coffee-rails', '~> 4.0.0'
# See https://github.com/sstephenson/execjs#readme for more supported runtimes
# gem 'therubyracer', platforms: :ruby

# Use jQuery as the JavaScript library
gem 'jquery-rails', '~> 4.0.0.beta2'
# Turbolinks makes following links in your web application faster. Read more: https://github.com/rails/turbolinks
gem 'turbolinks'
# Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
gem 'jbuilder', '~> 2.0'
# bundle exec rake doc:rails generates the API under doc/api.
gem 'sdoc', '~> 0.4.0', group: :doc
gem 'foundation-rails'

# Use ActiveModel has_secure_password
# gem 'bcrypt', '~> 3.1.7'

# Use Unicorn as the app server
# gem 'unicorn'

# Use Capistrano for deployment
# gem 'capistrano-rails', group: :development

group :development, :test do
  # Call 'debugger' anywhere in the code to stop execution and get a debugger console
  gem 'byebug'

  # Access an IRB console on exception pages or by using <%= console %> in views
  gem 'web-console', '~> 2.0.0.beta4'

  # Spring speeds up development by keeping your application running in the background. Read more: https://github.com/rails/spring
  gem 'spring'
end

Ran bundle, then ran rails g foundation:install

When I run my local server I now receive the following error:

NoMethodError in TodosController#index
undefined method `specificity' for [:not(.button)]:Array (in /todo_app/app/assets/stylesheets/foundation_and_overrides.scss)

Extracted source (around line #96):
94
95
96
97
98
99
                
        arr.each do |m|
          next if m.is_a?(String)
          spec = m.specificity
          if spec.is_a?(Range)
            min += spec.begin
            max += spec.end

Thank you for your time and help.

my application.css file:

*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
 * or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any styles
 * defined in the other CSS/SCSS files in this directory. It is generally better to create a new
 * file per style scope.
 *
 *= require_tree .
 *= require_self
 *= require foundation_and_overrides

 */

my application.js file:

// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
// or vendor/assets/javascripts of plugins, if any, can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// compiled file.
//
// Read Sprockets README (https://github.com/sstephenson/sprockets#sprockets-directives) for details
// about supported directives.
//
//= require jquery
//= require jquery_ujs
//= require foundation
//= require turbolinks
//= require_tree .

$(function(){ $(document).foundation(); });

Answer 1

This is an issue with the latest version of the sass gem (which the sass-rails gem requires) but it can be easily overcome.

In your Gemfile add in this line below your sass-rails specification:

gem 'sass', '3.4.5'

And then update your bundle if you are using bundler by running bundle. If it complains about the sass gem being locked to the 3.4.6 version, you will just need to run bundle update sass. Once that's done you should be good to go.

Note that this should only be a temporary measure until the sass gem is updated and the fix implemented.

You can see and follow the issue here https://github.com/sass/sass/issues/1476.

Once the issue is fixed and merged into the master branch, a new version of the sass gem will be released afterwards with the fix included. Once that is done, you should be able to remove that additional line in your Gemfile. Then will just need to perform a bundle update sass again to be up to date with the latest sass gem version.