Frontend Alchemist: SASS學習歷程

2014年9月2日星期二

Sass 是一個比較嚴謹且提升寫 Css 效率的程式語言，用過 Sass 就回不去 Css 啦！

請服用 - 30天掌握Sass語法 - by 廖洧杰

以下是學習心路歷程：

2. 增聽 "compass watch coffee" ( coffee 是你新增的專案資料夾)

3. 新增網頁框架 index.html

4. 編輯樣式 sass/index.sass

5. images sprites

$tab-spacing: 5px //圖片合併間隔空間
@import "tab/*.png" //在 images 底下你設定的 png 資料夾所有的 png 圖檔
@include all-tab-sprites //匯入合併圖檔
images sprites hover & active

If you want to add selectors for your sprites, it's easy todo by adding _active _target or _hover to the file name. _{Sprite Tutorial}

config.rb - relative_assets = true //把註解打開

注意：當修改 config 設定後，要重新在命令提示字元 watch 資料夾一次，設定才會生效。

6. How to replace a tab with four spaces in sublime text2 ?

http://stackoverflow.com/questions/9575739/how-to-replace-four-spaces-with-a-tab-in-sublime-text-2
Sass 相當嚴謹如果你的空格是一個 tab 就跑不出來啦！空格要用使用空白鍵。
如果你是使用 sublime text 2 來編輯，這個網站教你如何將空格預設為四個空白鍵。

7. sass structure

Frontend Alchemist