[新手前端日記] compass- fireapp使用筆記 5

fireapp是compass app 改名之後的名稱，是一個用來編寫網站的工具
似乎是用ruby 及 scss 為基礎

大神們說這是rails 但是小的不知道那是什麼，我只是個不久前還在用DW 寫CSS 的美工啊啊啊!!!

只知道如果要使用fireapp可至此取得軟體
http://fireapp.handlino.com/
裡面有個DEMO可以參考，不過因為我完全不是程式底，看DEMO也是有看沒懂

在神人一句：不會寫scss沒關係，不會時就寫css 及 前輩給我的 IE bug 求救卡 配合 deadline，還是完成了一個小改版的切版
趕快把心得都記一下，免得忘記。

安裝好fireapp後啓動，會開始跑 js , 我是用WIN-OS 會在右下角出現fireapp的icon
點開後可以選擇建立不同類型的專案

我是選compass的專案，取名建立之後就會給你一個資料夾
有以下這些檔案

sass
stylesheets
fire_app_log.txt
.sass-cache
config.rb

如果你和我一樣是美工底的一定很困惑，又沒有html 該從何下手?

答案就是自己建。建好 index.html 之後在裡面寫上
<%= render :partial => “index” %>
被載入的檔案名為
_index.html.erb
內容就寫在.html.erb裡

然後你要建立 _layoutl.html.erb
fireapp 會預設去讀取 _layout.html.erb

可以把內容重覆的部分都寫在 layout 裡，其他部分再建立新的

_檔名.html.erb

然後用這段語法插入到你需要這段 HTML 的地方
<%= render :partial => “檔名” %>

這個可以重覆使用在不同的地方
layout裡只能有一個的叫

<%= yield %>

yield 表示點你在預覽網站時，點到哪個檔名的連結，那個區塊就會自動嵌入那個檔名的內容
比如點下 a href=”books.html”
就會顯示出 _books.html.erb 的內容 包在 layout 其他的部分裡

CSS 的部分也是一樣，開 .scss 的檔案但是當成CSS編輯 (神人及前輩看到都要打我頭了)

scss的寫法可以參考　http://sass-lang.com/
不過我一開始只用了槽狀寫法，就是不用一直重覆寫
#post ul li{…}
#post img{…}

改成寫
#post {
ul li{…}
img{…}
}

然後 fireapp會自動幫你把 scss變成 css 收在 stylesheets 裡

最後在 config.rb 裡可以設定檔案的路徑
都做完之後，點右下的 fireapp icon 可以 build 就會建立出一般的 html + css檔案了

對了，即時預覽
在icon 上按右鍵會有個 preference 開啓你的 server 之後就能直接連 127.0.0.1 了
接著在 layout 最底下加上
<%= livereload_js %>

然後讓fireapp 去whach 你正在編的 folder
只要你一存檔任何檔案，變化都會自動變更~

=速記==================================================
_layout.html.erb 會是預設讀取
<%= yield %> 唯一，隨現在檔名自動嵌入片段

載入片段，可重覆使用 <%= render :partial => “header” %>
被載入的檔案名為 _header.html.erb

有假圖可用 <%= lorem_image('300x400') %>
指定重覆 <% for @a in 1..10 %> <% end %>

即時預覽 <%= livereload_js unless ENV['RACK_ENV'] == 'production' %>

@import “../images/box/*.png”;
@include all-box-sprites;

@import “compass/css3/border-radius”;
@include float(left);
@include opacity(0.5);
@include inline-block;
@include clearfix;

https://github.com/handlino/FireApp/wiki/Template-helpers