zoukankan      html  css  js  c++  java
  • 初始化rails上的compass项目

    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-stableframeworkscompassstylesheetscompass

    抽取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

    如果没有加载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:compasscompass_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:compasscompass_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:compasscompass_test>sass --watch appassetsstylesheets	ests.css.scss:appa
    ssetsstylesheets	est.css
    >>> Sass is watching for changes. Press Ctrl-C to stop.
          error appassetsstylesheets	ests.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 appassetsstylesheets	ests.css.scss (Line 13: Undefined mixin 'str
    etch'.)
    >>> Change detected to: app/assets/stylesheets/tests.css.scss
          error appassetsstylesheets	ests.css.scss (Line 13: Undefined mixin 'str
    etch'.)
    终止批处理操作吗(Y/N)? y
    
    D:compasscompass_test>compass --watch appassetsstylesheets	ests.css.scss:ap
    passetsstylesheets	est.css
    Error: invalid option: --watch
    
    D:compasscompass_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";
  • 相关阅读:
    js replace替换 忽略大小写问题
    Spring security实现国际化问题
    Mac 的mysql5.7没有配置文件,如何解决only_full_group_by 问题
    java设计模式学习
    synchronized的锁问题
    理解java的三种代理模式
    [acm]HDOJ 2059 龟兔赛跑
    [acm]HDOJ 2673 shǎ崽 OrOrOrOrz
    [acm]HDOJ 1200 To and Fro
    [acm]HDOJ 2064 汉诺塔III
  • 原文地址:https://www.cnblogs.com/haimingpro/p/3739518.html
Copyright © 2011-2022 走看看