文章彙整

如何設計 Magento佈景主題 (2) – 使用sass開發

By Astral Web 2 years agoNo Comments
首頁  /  網頁視覺設計  /  如何設計 Magento佈景主題 (2) – 使用sass開發

文章標題圖-如何設計Magento佈景主題(2) - 使用sass開發

上一篇 我們教大家把 Magento佈景 主題的基本環境設定好了,今天來談談如何使用sass來開發 Magento佈景 主題。在開發magento前請先安裝sass+Compass,還沒安裝sass的朋友,可以參考http://blog.shihshih.com/installing-the-sass-and-compass

監控magento專案

接下來我們就要來使用compass來監控這個新的佈景主題。

在上一篇的教學文章中、我們在rwd底下新增了一個study的資料夾。現在我們要複製了rwd > dufalt資料夾裡的所有內容到study資料夾裡。

rwd > default 這個佈景主題原本就是使用sass開發,所以我們直接使用他的設定是最快速的方法。

 

在我們複製過來的資料夾裡,sass 的設定檔config.rb的存放位置在 rwd > study > sass 底下,所以我們要讓compass 來監控這個資料夾﹙ rwd > study > sass﹚。

config.rb 是 sass專案的設定檔,設定項目包成了css、sass、images等的資料夾的位置,所產生的CSS檔的樣式、以及是否含註解文字等資訊。現階段我們直接使用原設定、不做任何的修改。

請跟著我們開始使用compass 來監控新的study佈景主題。

 

  1. 開啟Dos小視窗、開啟 rwd > study > sass。
  2. 接下來我們輸入監控指令 “compass watch”

步驟一-如何設計Magento佈景主題(2) - 使用sass開發

 

完成之後會看到以下的訊息:

>>> Compas is watching for changes. Press Ctrl-C to Stop.

這樣就代表完成sass監控摟。

我們來測試一下監控版本是否有成功,當sass檔案儲存後,ruby上會出現modified layout/_xxxxx.scss 這個資訊,代表更新成功。

sass檔案會自動轉出css檔案。

步驟二-如何設計Magento佈景主題(2) - 使用sass開發

 

步驟三-如何設計Magento佈景主題(2) - 使用sass開發

 

PS:開發期間Start Command Prompt with Ruby視窗必須保持開啟。若關閉的話scss就不會同步喔。

以上內容由Astralweb 歐斯瑞編寫製作

 000

推薦文章

Categories:
  網頁視覺設計Magento開發

留下回應

你的電子郵件地址不會被公開.

取得獨家電子商務祕技

建立更好的策略靈感

跟上全球的網路趨勢

絕佳的電商解決方案

電子商務戰略全指南

每月發送電商戰略指南,只要填寫E-mail即可訂閱!

請到您的信箱確認,即可完成訂閱。