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

如果没有加载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";

初始化rails上的compass项目的更多相关文章

  1. github入门到上传本地项目【网上资源整合】

    [在原文章的基础上,修改了描述的不够详细的地方,对内容进行了扩充,整合了网上的一些资料] [内容主要来自http://www.cnblogs.com/specter45/p/github.html#g ...

  2. github入门到上传本地项目

    GitHub是基于git实现的代码托管.git是目前最好用的版本控制系统了,非常受欢迎,比之svn更好. GitHub可以免费使用,并且快速稳定.即使是付费帐户,每个月不超过10美刀的费用也非常便宜. ...

  3. GitHub Android 最火开源项目Top20 GitHub 上的开源项目不胜枚举,越来越多的开源项目正在迁移到GitHub平台上。基于不要重复造轮子的原则,了解当下比较流行的Android与iOS开源项目很是必要。利用这些项目,有时能够让你达到事半功倍的效果。

    1. ActionBarSherlock(推荐) ActionBarSherlock应该算得上是GitHub上最火的Android开源项目了,它是一个独立的库,通过一个API和主题,开发者就可以很方便 ...

  4. 在Android上编写模块化项目(翻译)

    来源博客:Wang Jie's Blog 本文链接:http://blog.wangjiegulu.com/2018/02/13/writing_a_modular_project_on_androi ...

  5. Git安装配置和提交本地代码至Github,修改GitHub上显示的项目语言

    1. 下载安装git Windows版Git下载地址: https://gitforwindows.org/ 安装没有特别要求可以一路Next即可,安装完成后可以看到: 2. 创建本地代码仓库 打开G ...

  6. 【github&&git】2、github入门到上传本地项目

    [在原文章的基础上,修改了描述的不够详细的地方,对内容进行了扩充,整合了网上的一些资料] [内容主要来自http://www.cnblogs.com/specter45/p/github.html#g ...

  7. <转>github入门到上传本地项目

    转自 http://www.cnblogs.com/specter45/p/github.html GitHub是基于git实现的代码托管.git是目前最好用的版本控制系统了,非常受欢迎,比之svn更 ...

  8. win端git连接私服仓库+上传本地项目+从服务器下载文件到win

    win端git连接私服仓库: 1.win端 检查c:/Users/用户/.ssh/目录下是否有config文件(!!!没有任何后缀名).如果没有则新建config文件,然后修改添加如下内容: Host ...

  9. 上传本地项目到码云(gitee)

    1.码云上创建一个项目比如zhirong 2.本地创建一个文件夹F:\workspace\zhirong-items,进入zhirong-items打开git bash 3.执行git init ,这 ...

随机推荐

  1. SEO中最常见的几个错误

    昨天答应给放点干活的,今天如约而来! SEO中最常见的几个错误: 1.关键词   人们往往想当然的选择自己喜欢的keyword,但用户在搜索时,根本不会使用它们.比方说,你选择"优化果酱&q ...

  2. 刚才建立一个 swift 中文讨论社区,欢迎大家參与讨论

    http://www.chinaswift.me 主要目的是收集 swift学习资源

  3. Oracle 学习笔记 11 -- 视图 (VIEW)

    本次必须学习一个全新的概念-- 视图 (VIEW).在前面的笔记中曾提到过,数据对象包含:表.视图.序列.索引和同义词.前面的笔记都是对表的想剖析,那么本次笔记就对视图的世界进行深入的剖析. 视图是通 ...

  4. Access中出现改变字段“自己主动编号”类型,不能再改回来!(已解决)

    Access中出现改变字段"自己主动编号"类型,不能再改回来! (已解决) 一次把access中的自增字段改成了数值,再改回自增时,提示:在表中输入了数据之后,则不能将不论什么字段 ...

  5. android 08 AndroidManifest.xml

    AndroidManifest.xml <?xml version="1.0" encoding="utf-8"?> <manifest xm ...

  6. [转] git config命令使用第一篇——介绍,基本操作,增删改查

    平时我们在使用git的时候,很少去关注其配置是如何,而在实际开发中,对git config这个命令的使用也并不是很多,但是配置对一个程序和项目来说都是很重要的,我们今天来看看git的配置以及git c ...

  7. svn命令的使用

    1.检出svn  co  http://路径(目录或文件的全路径) [本地目录全路径] --username 用户名 --password 密码svn  co  svn://路径(目录或文件的全路径) ...

  8. tcmalloc源码剖析的资料

    1. https://seanhn.wordpress.com/2011/04/14/exploit-necromancy-in-tcmalloc-reviving-the-4-to-n-byte-o ...

  9. 上机实践 - - 一个例子了解C/C++中指针与数组的区别

    本例子来自于<剑指Offer>(P37) 解答如下: size1:20 data1是一个数组,sizeof(data1)是求数组大小. 这个数组包含5个整数,每个整数4个字节,共20字节. ...

  10. gulp的常用api

    gulp是什么? http://gulpjs.com/ 相信你会明白的! 与著名的构建工具grunt相比,有什么优势呢? 易于使用,代码优于配置 高效,不会产生过多的中间文件,减少I/O压力 易于学习 ...