【发布时间】：2015-06-01 20:35:46
【问题描述】：
执行此操作后出现以下错误：
https://railsapps.github.io/rails-foundation.html
Invalid CSS after "...ules: $modules ": expected "}", was "!global;" (in /home/jetimms/foci/code/ruby/BNR_RubyOnTheServer/chap31-advanceddatamodeling/nerd_news/app/assets/stylesheets/framework_and_overrides.css.scss:13)
/app/assets/stylesheets/framework_and_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
应用程序.js
...
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require foundation
//= require_tree .
$(function() {
$(document).foundation();
});
application.css.scss
/*
...
*= require_tree .
*= require_self
*/
宝石文件
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
应用程序/资产/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
【问题讨论】：
-
没错，这个问题的原始解决方案'将 gem 文件中的 sass 更新到 >= 3.3' 确实消除了我的错误。但是，它被来自我之前删除的 framework_and_overrides.css.scss 文件的错误所取代，并“解决”了这个问题（尽管它。仅供参考：“未定义的 mixin 'grid-column'。（在 .../app /assets/stylesheets/framework_and_overrides.css.scss:30")。
-
github.com/zurb/foundation/issues/2128 讨论“未定义的 Mixins”，但建议的最终解决方案是添加 @import "foundation_and_overrides"；到 app/asset/stylesheets/application.css.scss 文件的底部，用它替换 application.css 后，并没有摆脱我的错误。
标签： ruby-on-rails-4 sass zurb-foundation