compass以外还有一个很实用的scss模块,
_media-queries.scss
通过终端下载
curl -O https://raw.github.com/paranoida/sass-mediaqueries/master/_media-queries.scss
凡是用compass编译就可以直接import compass的模块,但是不主张import "compass",理由如下:
http://blog.rocodev.com/posts/11-dont-import-compass
禁止使用
@import "compass";
,最少最少都要從第二層如@import "compass/css3";
呼叫起。上禮拜幫一個專案上了從 Wrapbootstrap 上買來的 Core Admin CSS 當後台 Admin 之後。開發的同事偷偷問我,是否有什麼設定可以讓開發時不重新 compile CSS,因為現在第一次進後台,compile CSS 都要超過五秒。但我們自己寫的前台 CSS 倒沒有這個問題....
五秒是個很驚人的數字,根據以往的經驗,我猜測可能又是 CSS 架構設計不當的問題,所以編譯才要花這麼久時間。
果不其然,鑽進去看了一下整體架構之後,我只送了一個 commit,改了九行。
如果要在只有sass没有compass的情况下使用compass模块
* reset * css3 * layout * typography * utilities
需要从github下载compass的源文件,从
解压出来叫compass-stable\frameworks\compass\stylesheets\compass
抽取compass文件夹,放到自己的sass目录下
然后用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/
在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";