初始化rails上的compass項目

時間 2019-11-20

標籤初始化 rails compass 項目简体版

原文原文鏈接

compass之外還有一個很實用的scss模塊，javascript

_media-queries.scss

經過終端下載css

curl -O https://raw.github.com/paranoida/sass-mediaqueries/master/_media-queries.scss

凡是用compass編譯就能夠直接import compass的模塊，可是不主張import "compass",理由以下：html

http://blog.rocodev.com/posts/11-dont-import-compassjava

禁止使用 @import "compass";，最少最少都要從第二層如 @import "compass/css3"; 呼叫起。jquery

上禮拜幫一個專案上了從 Wrapbootstrap 上買來的 Core Admin CSS 當後臺 Admin 之後。開發的同事偷偷問我，是否有什麼設定能夠讓開發時不從新 compile CSS，因為現在第一次進後臺，compile CSS 都要超過五秒。但我們本身寫的前臺 CSS 倒沒有這個問題....

五秒是個很驚人的數字，根據以往的經驗，我猜測可能又是 CSS 架構設計不當的問題，因此編譯纔要花這麼久時間。css3

果不其然，鑽進去看了一下整體架構之後，我只送了一個 commit，改了九行。git

若是要在只有sass沒有compass的狀況下使用compass模塊github

　　* reset
　　* css3
　　* layout
　　* typography
　　* utilities

須要從github下載compass的源文件，從bootstrap

解壓出來叫compass-stable\frameworks\compass\stylesheets\compass

抽取compass文件夾，放到本身的sass目錄下vim

而後用sass --watch命令。

參考資料

https://github.com/Compass/compass-rails

http://vdisk.weibo.com/s/CXg91yzEgctl/1398399496

http://www.0daydown.com/11/72008.html

http://ruby-china.org/topics/4396

http://compass-style.org/reference/compass/support/

http://susy.oddbird.net

在rails下面建立compass項目

rails new texttextnamefoldername

最好加上參數
rails new texttextnamefoldername --skip-bundle （這樣不會卡在那裏須要ctrl+c）

vi gemfile

vim gemfile

//沒找到vi只好去sublime Text裏面左側選擇

gem list | grep compass

bundle

rails generate scaffold texttextnamefoldername

rake db:migrate

rails s

//這裏並無使用compass的建立，由於並不須要遵循它的結構

create compass namenamename

在建立好的rails項目的gemfile裏面加上compass

若是沒有加載sass還要在尾部加上gem 'sass-rails'

  ActiveRecord::SchemaMigration Load (1.0ms)  SELECT "schema_migrations".* FROM
"schema_migrations"
Processing by TestsController#index as HTML
  Test Load (0.0ms)  SELECT "tests".* FROM "tests"
  Rendered tests/index.html.erb within layouts/application (8.0ms)
Completed 500 Internal Server Error in 3012ms

ActionView::Template::Error (File to import not found or unreadable: compass_tes
t/mixins.
Load paths:
  CompassRails::SpriteImporter
  CompassRails::SpriteImporter
  CompassRails::SpriteImporter
  CompassRails::SpriteImporter
  CompassRails::SpriteImporter
  CompassRails::SpriteImporter
  CompassRails::SpriteImporter
  CompassRails::SpriteImporter
  D:/compass/compass_test/app/assets/images
  D:/compass/compass_test/app/assets/javascripts
  D:/compass/compass_test/app/assets/stylesheets
  D:/compass/compass_test/vendor/assets/javascripts
  D:/compass/compass_test/vendor/assets/stylesheets
  C:/RailsInstaller/Ruby2.0.0/lib/ruby/gems/2.0.0/gems/turbolinks-2.2.2/lib/asse
ts/javascripts
  C:/RailsInstaller/Ruby2.0.0/lib/ruby/gems/2.0.0/gems/jquery-rails-3.1.0/vendor
/assets/javascripts
  C:/RailsInstaller/Ruby2.0.0/lib/ruby/gems/2.0.0/gems/coffee-rails-4.0.1/lib/as
sets/javascripts
  D:/compass/compass_test/app/assets/stylesheets
  C:/RailsInstaller/Ruby2.0.0/lib/ruby/gems/2.0.0/gems/compass-0.12.6/frameworks
/blueprint/stylesheets
  C:/RailsInstaller/Ruby2.0.0/lib/ruby/gems/2.0.0/gems/compass-0.12.6/frameworks
/compass/stylesheets
  Compass::SpriteImporter
  (in D:/compass/compass_test/app/assets/stylesheets/application.scss:17)):
    2: <html>
    3: <head>
    4:   <title>CompassTest</title>
    5:   <%= stylesheet_link_tag    "application", media: "all", "data-turbolink
s-track" => true %>
    6:   <%= javascript_include_tag "application", "data-turbolinks-track" => tr
ue %>
    7:   <%= csrf_meta_tags %>
    8: </head>
  app/assets/stylesheets/application.scss:17
  app/views/layouts/application.html.erb:5:in `_app_views_layouts_application_ht
ml_erb__785237539_36801360'


  Rendered C:/RailsInstaller/Ruby2.0.0/lib/ruby/gems/2.0.0/gems/actionpack-4.0.2
/lib/action_dispatch/middleware/templates/rescues/_trace.erb (3.0ms)
  Rendered C:/RailsInstaller/Ruby2.0.0/lib/ruby/gems/2.0.0/gems/actionpack-4.0.2
/lib/action_dispatch/middleware/templates/rescues/_request_and_response.erb (2.0
ms)
  Rendered C:/RailsInstaller/Ruby2.0.0/lib/ruby/gems/2.0.0/gems/actionpack-4.0.2
/lib/action_dispatch/middleware/templates/rescues/template_error.erb within resc
ues/layout (102.0ms)
[2014-05-20 18:33:04] INFO  going to shutdown ...
[2014-05-20 18:33:04] INFO  WEBrick::HTTPServer#start done.
Exiting
終止批處理操做嗎(Y/N)? Y

D:\compass\compass_test>rails s
=> Booting WEBrick
=> Rails 4.0.2 application starting in development on http://0.0.0.0:3000
=> Run `rails server -h` for more startup options
=> Ctrl-C to shutdown server
[2014-05-20 18:33:26] INFO  WEBrick 1.3.1
[2014-05-20 18:33:26] INFO  ruby 2.0.0 (2013-05-14) [i386-mingw32]
[2014-05-20 18:33:26] INFO  WEBrick::HTTPServer#start: pid=6816 port=3000


Started GET "/tests" for 127.0.0.1 at 2014-05-20 18:33:32 +0800
  ActiveRecord::SchemaMigration Load (1.0ms)  SELECT "schema_migrations".* FROM
"schema_migrations"
Processing by TestsController#index as HTML
  Test Load (0.0ms)  SELECT "tests".* FROM "tests"
  Rendered tests/index.html.erb within layouts/application (9.0ms)
Completed 500 Internal Server Error in 103ms

ActionView::Template::Error (couldn't find file 'styleguide_full_of_compass_stuf
f'
  (in D:/compass/compass_test/app/assets/stylesheets/application.scss:12)):
    2: <html>
    3: <head>
    4:   <title>CompassTest</title>
    5:   <%= stylesheet_link_tag    "application", media: "all", "data-turbolink
s-track" => true %>
    6:   <%= javascript_include_tag "application", "data-turbolinks-track" => tr
ue %>
    7:   <%= csrf_meta_tags %>
    8: </head>
  app/views/layouts/application.html.erb:5:in `_app_views_layouts_application_ht
ml_erb___913617705_35830896'


  Rendered C:/RailsInstaller/Ruby2.0.0/lib/ruby/gems/2.0.0/gems/actionpack-4.0.2
/lib/action_dispatch/middleware/templates/rescues/_trace.erb (3.0ms)
  Rendered C:/RailsInstaller/Ruby2.0.0/lib/ruby/gems/2.0.0/gems/actionpack-4.0.2
/lib/action_dispatch/middleware/templates/rescues/_request_and_response.erb (2.0
ms)
  Rendered C:/RailsInstaller/Ruby2.0.0/lib/ruby/gems/2.0.0/gems/actionpack-4.0.2
/lib/action_dispatch/middleware/templates/rescues/template_error.erb within resc
ues/layout (44.0ms)
[2014-05-20 18:34:04] INFO  going to shutdown ...
[2014-05-20 18:34:04] INFO  WEBrick::HTTPServer#start done.
Exiting
終止批處理操做嗎(Y/N)? Y

D:\compass\compass_test>rails s
=> Booting WEBrick
=> Rails 4.0.2 application starting in development on http://0.0.0.0:3000
=> Run `rails server -h` for more startup options
=> Ctrl-C to shutdown server
[2014-05-20 18:34:26] INFO  WEBrick 1.3.1
[2014-05-20 18:34:26] INFO  ruby 2.0.0 (2013-05-14) [i386-mingw32]
[2014-05-20 18:34:26] INFO  WEBrick::HTTPServer#start: pid=184 port=3000


Started GET "/tests" for 127.0.0.1 at 2014-05-20 18:34:30 +0800
  ActiveRecord::SchemaMigration Load (0.0ms)  SELECT "schema_migrations".* FROM
"schema_migrations"
Processing by TestsController#index as HTML
  Test Load (0.0ms)  SELECT "tests".* FROM "tests"
  Rendered tests/index.html.erb within layouts/application (7.0ms)
Completed 200 OK in 8175ms (Views: 8125.5ms | ActiveRecord: 0.0ms)


Started GET "/assets/scaffolds.css?body=1" for 127.0.0.1 at 2014-05-20 18:34:39
+0800


Started GET "/assets/application.css?body=1" for 127.0.0.1 at 2014-05-20 18:34:3
9 +0800


Started GET "/assets/tests.css?body=1" for 127.0.0.1 at 2014-05-20 18:34:39 +080
0


Started GET "/assets/jquery.js?body=1" for 127.0.0.1 at 2014-05-20 18:34:39 +080
0


Started GET "/assets/jquery_ujs.js?body=1" for 127.0.0.1 at 2014-05-20 18:34:39
+0800


Started GET "/assets/turbolinks.js?body=1" for 127.0.0.1 at 2014-05-20 18:34:39
+0800


Started GET "/assets/tests.js?body=1" for 127.0.0.1 at 2014-05-20 18:34:39 +0800



Started GET "/assets/application.js?body=1" for 127.0.0.1 at 2014-05-20 18:34:39
 +0800


Started GET "/tests" for 127.0.0.1 at 2014-05-20 18:35:34 +0800
Processing by TestsController#index as HTML
  Test Load (1.0ms)  SELECT "tests".* FROM "tests"
  Rendered tests/index.html.erb within layouts/application (6.0ms)
Completed 200 OK in 31ms (Views: 27.0ms | ActiveRecord: 1.0ms)


Started GET "/assets/jquery.js?body=1" for 127.0.0.1 at 2014-05-20 18:35:34 +080
0


Started GET "/assets/scaffolds.css?body=1" for 127.0.0.1 at 2014-05-20 18:35:34
+0800


Started GET "/assets/turbolinks.js?body=1" for 127.0.0.1 at 2014-05-20 18:35:34
+0800


Started GET "/assets/application.css?body=1" for 127.0.0.1 at 2014-05-20 18:35:3
4 +0800


Started GET "/assets/jquery_ujs.js?body=1" for 127.0.0.1 at 2014-05-20 18:35:34
+0800


Started GET "/assets/tests.css?body=1" for 127.0.0.1 at 2014-05-20 18:35:34 +080
0


Started GET "/assets/tests.js?body=1" for 127.0.0.1 at 2014-05-20 18:35:34 +0800



Started GET "/assets/application.js?body=1" for 127.0.0.1 at 2014-05-20 18:35:34
 +0800


Started GET "/tests" for 127.0.0.1 at 2014-05-20 18:38:23 +0800
Processing by TestsController#index as HTML
  Test Load (1.0ms)  SELECT "tests".* FROM "tests"
  Rendered tests/index.html.erb within layouts/application (6.0ms)
Completed 200 OK in 3633ms (Views: 3628.2ms | ActiveRecord: 1.0ms)


Started GET "/assets/scaffolds.css?body=1" for 127.0.0.1 at 2014-05-20 18:38:27
+0800


Started GET "/assets/application.css?body=1" for 127.0.0.1 at 2014-05-20 18:38:2
7 +0800


Started GET "/assets/jquery_ujs.js?body=1" for 127.0.0.1 at 2014-05-20 18:38:27
+0800


Started GET "/assets/turbolinks.js?body=1" for 127.0.0.1 at 2014-05-20 18:38:27
+0800


Started GET "/assets/tests.css?body=1" for 127.0.0.1 at 2014-05-20 18:38:27 +080
0


Started GET "/assets/jquery.js?body=1" for 127.0.0.1 at 2014-05-20 18:38:27 +080
0


Started GET "/assets/tests.js?body=1" for 127.0.0.1 at 2014-05-20 18:38:27 +0800



Started GET "/assets/application.js?body=1" for 127.0.0.1 at 2014-05-20 18:38:27
 +0800


Started GET "/tests" for 127.0.0.1 at 2014-05-20 18:39:00 +0800
Processing by TestsController#index as HTML
  Test Load (1.0ms)  SELECT "tests".* FROM "tests"
  Rendered tests/index.html.erb within layouts/application (4.0ms)
Completed 200 OK in 2674ms (Views: 2671.2ms | ActiveRecord: 1.0ms)


Started GET "/assets/scaffolds.css?body=1" for 127.0.0.1 at 2014-05-20 18:39:03
+0800


Started GET "/assets/application.css?body=1" for 127.0.0.1 at 2014-05-20 18:39:0
3 +0800


Started GET "/assets/tests.css?body=1" for 127.0.0.1 at 2014-05-20 18:39:03 +080
0


Started GET "/assets/jquery.js?body=1" for 127.0.0.1 at 2014-05-20 18:39:04 +080
0


Started GET "/assets/jquery_ujs.js?body=1" for 127.0.0.1 at 2014-05-20 18:39:04
+0800


Started GET "/assets/turbolinks.js?body=1" for 127.0.0.1 at 2014-05-20 18:39:04
+0800


Started GET "/assets/tests.js?body=1" for 127.0.0.1 at 2014-05-20 18:39:04 +0800



Started GET "/assets/application.js?body=1" for 127.0.0.1 at 2014-05-20 18:39:04
 +0800
[2014-05-20 18:40:03] INFO  going to shutdown ...
[2014-05-20 18:40:03] INFO  WEBrick::HTTPServer#start done.
Exiting
終止批處理操做嗎(Y/N)? y

D:\compass\compass_test>sass --watch app\assets\stylesheets\tests.css.scss:app\a
ssets\stylesheets\test.css
>>> Sass is watching for changes. Press Ctrl-C to stop.
      error app\assets\stylesheets\tests.css.scss (Line 6: File to import not fo
und or unreadable: compass/layout/stretching.
Load path: D:/compass/compass_test (DEPRECATED))
>>> Change detected to: app/assets/stylesheets/tests.css.scss
      error app\assets\stylesheets\tests.css.scss (Line 13: Undefined mixin 'str
etch'.)
>>> Change detected to: app/assets/stylesheets/tests.css.scss
      error app\assets\stylesheets\tests.css.scss (Line 13: Undefined mixin 'str
etch'.)
終止批處理操做嗎(Y/N)? y

D:\compass\compass_test>compass --watch app\assets\stylesheets\tests.css.scss:ap
p\assets\stylesheets\test.css
Error: invalid option: --watch

D:\compass\compass_test>

application.css.scss

/*
 * 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 top of the
 * compiled file, but it's generally better to create a new file per style scope.
 *
 *= require_self
 *= require_tree .
 */
@import "compass";

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。