Ruby on rails 4 基础rails和rails 4 css错误

执行此操作后，我收到以下错误：

/app/assets/stylesheets/framework_和_overrides.css.scss

// import the CSS framework
@import "foundation";

// override for the 'Home' navigation link
.top-bar .name {
  font-size: rem-calc(13);
  line-height: 45px; }
.top-bar .name a {
  font-weight: normal;
  color: white;
  padding: 0 15px; }

// THESE ARE EXAMPLES YOU CAN MODIFY
// create mixins using Foundation classes
@mixin twelve-columns {
  @extend .small-12;
  @extend .columns;
  }
@mixin six-columns-centered {
  @extend .small-6;
  @extend .columns;
  @extend .text-center;
  }
// create your own classes
// to make views framework-neutral
.column {
  @include six-columns-centered;
  }
.form {
  @include grid-column(6);
  }
.form-centered {
  @include six-columns-centered;
  }
.submit {
  @extend .button;
  @extend .radius;
  }
// apply styles to HTML elements
// to make views framework-neutral
main {
  @include twelve-columns;
  background-color: #eee;
  }
section {
  @extend .row;
  margin-top: 20px;
  }

// Styles for form views
// using Foundation
// generated by the rails_layout gem
.authform {
  padding-top: 30px;
  max-width: 320px;
  margin: 0 auto;
}
.authform form {
  @include panel();
  padding-bottom: 60px;
}
.authform form a {
  font-size: rem-calc(13);
}
.authform form p {
  font-size: rem-calc(13);
}
.authform .form-group {
  // for Bootstrap, not used for Foundation
}
.authform .form-control {
  // for Bootstrap, not used for Foundation
}
.authform .checkbox {
  // for Bootstrap, not used for Foundation
}
.authform fieldset {
  @include panel();
}
.authform #error_explanation:not(:empty) {
  @extend .alert-box;
  @extend .alert;
}
.authform #error_explanation h2 {
  font-size: rem-calc(16);
  color: white;
}
.button-xs {
  @extend .button;
  @extend .radius;
  @extend .tiny;
}

不知道为什么会有问题。第13行是注释

// THESE ARE EXAMPLES YOU CAN MODIFY

application.js

...
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require foundation
//= require_tree .
$(function() {
  $(document).foundation();
});

application.css.scss

/*
 ...
 *= require_tree .
 *= require_self
 */

Gemfile

source 'https://rubygems.org'


# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails', '4.1.8'
# Use postgresql as the database for Active Record
gem 'pg'
# Use SCSS for stylesheets
gem 'sass-rails', '~> 4.0.3'
# 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'
# 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

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

# 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

# Use debugger
# gem 'debugger', group: [:development, :test]

# Use Devise for user handling
gem 'devise'

# Use byebug for debugging
gem 'byebug', group: [:development, :test]

# Use Pundit for authorization
gem 'pundit'

# Use Better Errors for more verbose errors
gem 'better_errors'

# Use Binding of Caller for REPL and local/instance variable inspection in errors
gem 'binding_of_caller'

# Use Foundation for front end help
gem 'foundation-rails'
group :development do
  gem 'rails_layout'
end

app/assets/javascripts

$ lla app/assets/javascripts
total 16
drwxrwxr-x 2 jetimms jetimms 4096 Mar 28 10:11 .
drwxrwxr-x 5 jetimms jetimms 4096 Mar 28 09:59 ..
-rw-rw-r-- 1 jetimms jetimms  734 Mar 28 11:01 application.js
-rw-rw-r-- 1 jetimms jetimms  211 Feb 22 23:21 posts.js.coffee

应用程序/资产/样式表

$ lla app/assets/stylesheets
total 20
drwxrwxr-x 2 jetimms jetimms 4096 Mar 28 11:08 .
drwxrwxr-x 5 jetimms jetimms 4096 Mar 28 09:59 ..
-rw-rw-r-- 1 jetimms jetimms  683 Mar 28 11:01 application.css.scss
-rw-rw-r-- 1 jetimms jetimms 1725 Mar 28 11:11 framework_and_overrides.css.scss
-rw-rw-r-- 1 jetimms jetimms  176 Feb 22 23:21 posts.css.scss

$ lla app/assets/stylesheets
total 368
drwxrwxr-x 2 jetimms jetimms   4096 Mar 28 12:07 .
drwxrwxr-x 5 jetimms jetimms   4096 Mar 28 09:59 ..
-rw-rw-r-- 1 jetimms jetimms    683 Mar 28 11:56 application.css.scss
-rw-r--r-- 1 jetimms jetimms 196181 Feb  2 20:57 foundation.css
-rw-r--r-- 1 jetimms jetimms 155214 Feb  2 20:57 foundation.min.css
-rw-r--r-- 1 jetimms jetimms   7798 Feb  2 20:57 normalize.css
-rw-rw-r-- 1 jetimms jetimms    176 Feb 22 23:21 posts.css.scss

---

解决此问题的方法是从app/asset/stylesheets中删除framework_和_overrides.css.scss文件，并手动添加（到同一文件夹）打包的foundation-5.5.1/css下载文件夹内容：

应用程序/资产/样式表

$ lla app/assets/stylesheets
total 20
drwxrwxr-x 2 jetimms jetimms 4096 Mar 28 11:08 .
drwxrwxr-x 5 jetimms jetimms 4096 Mar 28 09:59 ..
-rw-rw-r-- 1 jetimms jetimms  683 Mar 28 11:01 application.css.scss
-rw-rw-r-- 1 jetimms jetimms 1725 Mar 28 11:11 framework_and_overrides.css.scss
-rw-rw-r-- 1 jetimms jetimms  176 Feb 22 23:21 posts.css.scss

$ lla app/assets/stylesheets
total 368
drwxrwxr-x 2 jetimms jetimms   4096 Mar 28 12:07 .
drwxrwxr-x 5 jetimms jetimms   4096 Mar 28 09:59 ..
-rw-rw-r-- 1 jetimms jetimms    683 Mar 28 11:56 application.css.scss
-rw-r--r-- 1 jetimms jetimms 196181 Feb  2 20:57 foundation.css
-rw-r--r-- 1 jetimms jetimms 155214 Feb  2 20:57 foundation.min.css
-rw-r--r-- 1 jetimms jetimms   7798 Feb  2 20:57 normalize.css
-rw-rw-r-- 1 jetimms jetimms    176 Feb 22 23:21 posts.css.scss

---

没错，这个问题的原始解决方案“在gem文件中将sass更新为>=3.3”确实消除了我的错误。但是，它被一个错误所取代，这个错误来自于我之前删除的framework_and_overrides.css.scss文件，并“解决”了这个问题（尽管它是.FYI:“未定义的mixin‘grid column’。（在…/app/assets/stylesheets/framework_and_overrides.css.scss:30中）。讨论了“未定义的mixin”，但最终的解决方案是添加@import将application.css替换为app/asset/stylesheets/application.css.scss文件后，app/asset/stylesheets/application.css.scss文件底部的“foundation_和_overrides”并没有消除我的错误。