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

Popular posts from this blog

google chrome - Developer tools - How to inspect the elements which are added momentarily (by JQuery)? -

angularjs - Showing an empty as first option in select tag -

php - Cloud9 cloud IDE and CakePHP -