系列文章
30天掌握Sass語法 - (25) 透過index()與nth()來設計網站版本樣式控制管理
在以往有些網站性質會因為節慶的關係， 而會修改網頁樣式， 在傳統比較常見的做法， 一個網站會有兩隻CSS， 第一個CSS是網站全域樣式，譬如Layout、mod...
30天掌握Sass語法 - (26) 如何讓你的CSS動畫更具動態效果
.box height: 30px width: 30px transition: all 1s &:hover width:...
30天掌握Sass語法 - (27) 使用@if提升@Mixin靈活度，以CSS圖形化為例
在第20天的時候， 我有分享關於@Mixin與Sass運算的運用手法， 但在一些設計情境下， 你會發現有些樣式如果只單純用Sass運算還是不太夠的， 所以這一次...
30天掌握Sass語法 - (28)Compass圖片合併功能(CSS Sprite)
在早期網頁設計師要做CSS Sprite的時候， 除了自己手做土法煉鋼以外， 同時也會使用線上網站工具來解決這個問題， 剛好翻到六年前我自己在photoshop...
30天掌握Sass語法 - (29) @for+random()創造無限可能
for迴圈不論是在哪個程式語言上都非常的常見， 這一次則是介紹Sass @for的運用方法。 我們先來一個簡單的範例 @for $i from 1 thro...
30天掌握Sass語法 - (30)inline-image()與Livereload介紹
上篇文章好像太早發了，導致系統沒更新，所以第30天煩請以此文章為主 關於Sass的基礎知識， 其實在這30天都講得差不多了， 如果有興趣想再深入了解的話， 可以...
Sass開發流程設計 - (1) 切圖、規劃Layout
關於Sass的基礎在前30天已經介紹得差不多了， 但畢竟理論的東西要導入自己的實務開發流程始終會有陣痛期。 所以之後的文章我會用Sass從無到有實際做一個版型出...
Sass開發流程設計 - (2) Sass結構規劃、全域變數設定
切完所有圖片後， 就可以開始規劃Sass檔案了， 當你今天新建立一個Sass專案時， 裡面預設會有print、ie、screen的Sass檔案， 第一次撰寫Sa...
Sass開發流程設計 - (3) 網頁排版流程(上)
延續第二章， 我們就開始排網頁了。 由於一天時間有限， 所以分上下兩集來播放與解說。 你可以從影片內容可以發現到， 一個網頁設計在排版時， 在一邊進行前端設計時...
Sass開發流程設計 - (4) 排版流程(下)
延續昨天的版面， 已將所有的大框架建立好了， 這裡先來提自己的排版流程習慣： 1.我習慣先把大框架設定用好後，再來微調各元素間的距離。 2.在排網頁時，我會先將...