sass - foundation-rails and Rails 4 css error -
this question has answer here:
i'm getting following error after following this:
https://railsapps.github.io/rails-foundation.html
invalid css after "...ules: $modules ": expected "}", "!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 css framework @import "foundation"; // override 'home' navigation link .top-bar .name { font-size: rem-calc(13); line-height: 45px; } .top-bar .name { font-weight: normal; color: white; padding: 0 15px; } // these examples 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 own classes // 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 html elements // make views framework-neutral main { @include twelve-columns; background-color: #eee; } section { @extend .row; margin-top: 20px; } // styles form views // using foundation // generated rails_layout gem .authform { padding-top: 30px; max-width: 320px; margin: 0 auto; } .authform form { @include panel(); padding-bottom: 60px; } .authform form { font-size: rem-calc(13); } .authform form p { font-size: rem-calc(13); } .authform .form-group { // bootstrap, not used foundation } .authform .form-control { // bootstrap, not used foundation } .authform .checkbox { // bootstrap, not used 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; }
not sure why got problem. line 13 comment.
// these examples 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 database active record gem 'pg' # use scss stylesheets gem 'sass-rails', '~> 4.0.3' # use uglifier compressor javascript assets gem 'uglifier', '>= 1.3.0' # use coffeescript .js.coffee assets , views gem 'coffee-rails', '~> 4.0.0' # see https://github.com/sstephenson/execjs#readme more supported runtimes # gem 'therubyracer', platforms: :ruby # use jquery javascript library gem 'jquery-rails' # turbolinks makes following links in web application faster. read more: https://github.com/rails/turbolinks gem 'turbolinks' # build json apis ease. read more: https://github.com/rails/jbuilder gem 'jbuilder', '~> 2.0' # bundle exec rake doc:rails generates api under doc/api. gem 'sdoc', '~> 0.4.0', group: :doc # spring speeds development keeping application running in background. read more: https://github.com/rails/spring gem 'spring', group: :development # use activemodel has_secure_password # gem 'bcrypt', '~> 3.1.7' # use unicorn app server # gem 'unicorn' # use capistrano deployment # gem 'capistrano-rails', group: :development # use debugger # gem 'debugger', group: [:development, :test] # use devise user handling gem 'devise' # use byebug debugging gem 'byebug', group: [:development, :test] # use pundit authorization gem 'pundit' # use better errors more verbose errors gem 'better_errors' # use binding of caller repl , local/instance variable inspection in errors gem 'binding_of_caller' # use foundation front end gem 'foundation-rails' group :development 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
app/assets/stylesheets
$ 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
what fixed issue deleting framework_and_overrides.css.scss file app/asset/stylesheets , manually adding (to same folder) packaged foundation-5.5.1/css downloaded folder contents:
http://foundation.zurb.com/cdn/releases/foundation-5.5.1.zip
$ lla ~/downloads/foundation-5.5.1/css total 360 drwx------ 2 jetimms jetimms 4096 feb 22 17:47 . drwxrwxr-x 5 jetimms jetimms 4096 feb 22 17:47 .. -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
app/assets/stylesheets
$ 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
Comments
Post a Comment