haml scss轉換編寫html css的前期工作

http://www.w3cplus.com/sassguide/install.html

 先下載ruby

$ gem sources

$ gem sources --remove https://rubygems.org/

$ gem sources -a https://ruby.taobao.org/

$ gem sources -1

$ gem install haml

$ gem install scss

$ gem install sass

$ gem install rails

$ gem install compass

$ compass -v

 

$gem install hpricot ---html轉換haml

$ html2haml index.html index.haml

--- --- --- --- --- ----
添加目錄 |
--- --- --- --- --- ----

mkdir css 添加

rmdir css 刪掉

--- --- --- --- --- ----
添加目錄 |
--- --- --- --- --- ----

--- --- --- --- --- ----
scss轉換 |
--- --- --- --- --- ----

$ cd\

$ cd scss
//scss目錄有一個scss
$ scss --watch style.scss:style.css
//scss目錄的scss已經轉換爲css了

--- --- --- --- --- ----
scss轉換 |
--- --- --- --- --- ----

--- --- --- --- --- ----
haml轉換 |
--- --- --- --- --- ----

$ cd\

$ cd haml
//haml目錄有一個scss
$ haml style.haml style.html
//haml目錄的haml已經轉換爲haml了

--- --- --- --- --- ----
haml轉換 |
--- --- --- --- --- ----

--- --- --- --- --- ----
html轉換 |
--- --- --- --- --- ----

$ cd\

$ cd html
//html目錄有一個index.html
$ html2haml index.html:index.haml
//html目錄的index.html已經轉換爲haml了

--- --- --- --- --- ----
html轉換 |
--- --- --- --- --- ----

--- --- --- --- --- ----
退出目錄 |
--- --- --- --- --- ----

cd...

cd: css/
_
_
ctrl + c

--- --- --- --- --- ----
退出目錄 |
--- --- --- --- --- ----

--- --- --- --- --- ----
查看文件 |
--- --- --- --- --- ----

$ cd\

$ cd web

$ type index.scss

$ scss --watch index.scss:index.css

--- --- --- --- --- ----
查看文件 |
--- --- --- --- --- ----