初始化rails上的compass项目

时间：2023-12-05 22:59:20

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/

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


初始化rails上的compass项目


如果没有加载sass还要在尾部加上gem 'sass-rails'




  ActiveRecord::SchemaMigration Load (.0ms)  SELECT "schema_migrations".* FROM

"schema_migrations"

Processing by TestsController#index as HTML

  Test Load (.0ms)  SELECT "tests".* FROM "tests"

  Rendered tests/index.html.erb within layouts/application (.0ms)

Completed  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./gems/turbolinks-2.2./lib/asse

ts/javascripts

  C:/RailsInstaller/Ruby2.0.0/lib/ruby/gems/2.0./gems/jquery-rails-3.1./vendor

/assets/javascripts

  C:/RailsInstaller/Ruby2.0.0/lib/ruby/gems/2.0./gems/coffee-rails-4.0./lib/as

sets/javascripts

  D:/compass/compass_test/app/assets/stylesheets

  C:/RailsInstaller/Ruby2.0.0/lib/ruby/gems/2.0./gems/compass-0.12./frameworks

/blueprint/stylesheets

  C:/RailsInstaller/Ruby2.0.0/lib/ruby/gems/2.0./gems/compass-0.12./frameworks

/compass/stylesheets

  Compass::SpriteImporter

  (in D:/compass/compass_test/app/assets/stylesheets/application.scss:)):

    : <html>

    : <head>

    :   <title>CompassTest</title>

    :   <%= stylesheet_link_tag    "application", media: "all", "data-turbolink

s-track" => true %>

    :   <%= javascript_include_tag "application", "data-turbolinks-track" => tr

ue %>

    :   <%= csrf_meta_tags %>

    : </head>

  app/assets/stylesheets/application.scss:

  app/views/layouts/application.html.erb::in `_app_views_layouts_application_ht

ml_erb__785237539_36801360'

  Rendered C:/RailsInstaller/Ruby2.0.0/lib/ruby/gems/2.0./gems/actionpack-4.0.

/lib/action_dispatch/middleware/templates/rescues/_trace.erb (.0ms)

  Rendered C:/RailsInstaller/Ruby2.0.0/lib/ruby/gems/2.0./gems/actionpack-4.0.

/lib/action_dispatch/middleware/templates/rescues/_request_and_response.erb (2.0

ms)

  Rendered C:/RailsInstaller/Ruby2.0.0/lib/ruby/gems/2.0./gems/actionpack-4.0.

/lib/action_dispatch/middleware/templates/rescues/template_error.erb within resc

ues/layout (.0ms)

[-- ::] INFO  going to shutdown ...

[-- ::] INFO  WEBrick::HTTPServer#start done.

Exiting

终止批处理操作吗(Y/N)? Y

D:\compass\compass_test>rails s

=> Booting WEBrick

=> Rails 4.0. application starting in development on http://0.0.0.0:3000

=> Run `rails server -h` for more startup options

=> Ctrl-C to shutdown server

[-- ::] INFO  WEBrick 1.3.

[-- ::] INFO  ruby 2.0. (--) [i386-mingw32]

[-- ::] INFO  WEBrick::HTTPServer#start: pid= port=

Started GET "/tests" for 127.0.0.1 at -- :: +

  ActiveRecord::SchemaMigration Load (.0ms)  SELECT "schema_migrations".* FROM

"schema_migrations"

Processing by TestsController#index as HTML

  Test Load (.0ms)  SELECT "tests".* FROM "tests"

  Rendered tests/index.html.erb within layouts/application (.0ms)

Completed  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:)):

    : <html>

    : <head>

    :   <title>CompassTest</title>

    :   <%= stylesheet_link_tag    "application", media: "all", "data-turbolink

s-track" => true %>

    :   <%= javascript_include_tag "application", "data-turbolinks-track" => tr

ue %>

    :   <%= csrf_meta_tags %>

    : </head>

  app/views/layouts/application.html.erb::in `_app_views_layouts_application_ht

ml_erb___913617705_35830896'

  Rendered C:/RailsInstaller/Ruby2.0.0/lib/ruby/gems/2.0./gems/actionpack-4.0.

/lib/action_dispatch/middleware/templates/rescues/_trace.erb (.0ms)

  Rendered C:/RailsInstaller/Ruby2.0.0/lib/ruby/gems/2.0./gems/actionpack-4.0.

/lib/action_dispatch/middleware/templates/rescues/_request_and_response.erb (2.0

ms)

  Rendered C:/RailsInstaller/Ruby2.0.0/lib/ruby/gems/2.0./gems/actionpack-4.0.

/lib/action_dispatch/middleware/templates/rescues/template_error.erb within resc

ues/layout (.0ms)

[-- ::] INFO  going to shutdown ...

[-- ::] INFO  WEBrick::HTTPServer#start done.

Exiting

终止批处理操作吗(Y/N)? Y

D:\compass\compass_test>rails s

=> Booting WEBrick

=> Rails 4.0. application starting in development on http://0.0.0.0:3000

=> Run `rails server -h` for more startup options

=> Ctrl-C to shutdown server

[-- ::] INFO  WEBrick 1.3.

[-- ::] INFO  ruby 2.0. (--) [i386-mingw32]

[-- ::] INFO  WEBrick::HTTPServer#start: pid= port=

Started GET "/tests" for 127.0.0.1 at -- :: +

  ActiveRecord::SchemaMigration Load (.0ms)  SELECT "schema_migrations".* FROM

"schema_migrations"

Processing by TestsController#index as HTML

  Test Load (.0ms)  SELECT "tests".* FROM "tests"

  Rendered tests/index.html.erb within layouts/application (.0ms)

Completed  OK in 8175ms (Views: .5ms | ActiveRecord: .0ms)

Started GET "/assets/scaffolds.css?body=1" for 127.0.0.1 at -- ::

+

Started GET "/assets/application.css?body=1" for 127.0.0.1 at -- ::

 +

Started GET "/assets/tests.css?body=1" for 127.0.0.1 at -- :: +

Started GET "/assets/jquery.js?body=1" for 127.0.0.1 at -- :: +

Started GET "/assets/jquery_ujs.js?body=1" for 127.0.0.1 at -- ::

+

Started GET "/assets/turbolinks.js?body=1" for 127.0.0.1 at -- ::

+

Started GET "/assets/tests.js?body=1" for 127.0.0.1 at -- :: +

Started GET "/assets/application.js?body=1" for 127.0.0.1 at -- ::

 +

Started GET "/tests" for 127.0.0.1 at -- :: +

Processing by TestsController#index as HTML

  Test Load (.0ms)  SELECT "tests".* FROM "tests"

  Rendered tests/index.html.erb within layouts/application (.0ms)

Completed  OK in 31ms (Views: .0ms | ActiveRecord: .0ms)

Started GET "/assets/jquery.js?body=1" for 127.0.0.1 at -- :: +

Started GET "/assets/scaffolds.css?body=1" for 127.0.0.1 at -- ::

+

Started GET "/assets/turbolinks.js?body=1" for 127.0.0.1 at -- ::

+

Started GET "/assets/application.css?body=1" for 127.0.0.1 at -- ::

 +

Started GET "/assets/jquery_ujs.js?body=1" for 127.0.0.1 at -- ::

+

Started GET "/assets/tests.css?body=1" for 127.0.0.1 at -- :: +

Started GET "/assets/tests.js?body=1" for 127.0.0.1 at -- :: +

Started GET "/assets/application.js?body=1" for 127.0.0.1 at -- ::

 +

Started GET "/tests" for 127.0.0.1 at -- :: +

Processing by TestsController#index as HTML

  Test Load (.0ms)  SELECT "tests".* FROM "tests"

  Rendered tests/index.html.erb within layouts/application (.0ms)

Completed  OK in 3633ms (Views: .2ms | ActiveRecord: .0ms)

Started GET "/assets/scaffolds.css?body=1" for 127.0.0.1 at -- ::

+

Started GET "/assets/application.css?body=1" for 127.0.0.1 at -- ::

 +

Started GET "/assets/jquery_ujs.js?body=1" for 127.0.0.1 at -- ::

+

Started GET "/assets/turbolinks.js?body=1" for 127.0.0.1 at -- ::

+

Started GET "/assets/tests.css?body=1" for 127.0.0.1 at -- :: +

Started GET "/assets/jquery.js?body=1" for 127.0.0.1 at -- :: +

Started GET "/assets/tests.js?body=1" for 127.0.0.1 at -- :: +

Started GET "/assets/application.js?body=1" for 127.0.0.1 at -- ::

 +

Started GET "/tests" for 127.0.0.1 at -- :: +

Processing by TestsController#index as HTML

  Test Load (.0ms)  SELECT "tests".* FROM "tests"

  Rendered tests/index.html.erb within layouts/application (.0ms)

Completed  OK in 2674ms (Views: .2ms | ActiveRecord: .0ms)

Started GET "/assets/scaffolds.css?body=1" for 127.0.0.1 at -- ::

+

Started GET "/assets/application.css?body=1" for 127.0.0.1 at -- ::

 +

Started GET "/assets/tests.css?body=1" for 127.0.0.1 at -- :: +

Started GET "/assets/jquery.js?body=1" for 127.0.0.1 at -- :: +

Started GET "/assets/jquery_ujs.js?body=1" for 127.0.0.1 at -- ::

+

Started GET "/assets/turbolinks.js?body=1" for 127.0.0.1 at -- ::

+

Started GET "/assets/tests.js?body=1" for 127.0.0.1 at -- :: +

Started GET "/assets/application.js?body=1" for 127.0.0.1 at -- ::

 +

[-- ::] INFO  going to shutdown ...

[-- ::] 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 : 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 : Undefined mixin 'str

etch'.)

>>> Change detected to: app/assets/stylesheets/tests.css.scss

      error app\assets\stylesheets\tests.css.scss (Line : 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";


相关文章