iT邦幫忙

鐵人檔案

2013 iT 邦幫忙鐵人賽
回列表

30天掌握Sass語法 系列

Sass為可更加便利管理與撰寫CSS的程式語言,
如果你希望找一個工具來整理歷年所寫的CSS,並整理成自己的知識庫,
那Sass會是你最佳選項之一,
希望可藉由鐵人30天將這一兩年所學的SASS實務應用、程式軟體、管理應用面來進行分享。

鐵人鍊成 | 共 41 篇文章 | 270 人訂閱 訂閱系列文 RSS系列文
DAY 1

達標好文 30天掌握Sass語法 - (1)什麼是SASS?它真的能加速我寫CSS的效率嗎?

SASS是一個可以提升寫網頁CSS效率的程式語言, 但礙於學習曲線門檻過高,導致國內網頁設計師的使用率仍未普及化, 希望藉由個人從CSS轉SASS的經驗分享,...

2013-09-16 ‧ 由 廖洧杰 分享
DAY 2

達標好文 30天掌握Sass語法 - (2)SASS該怎麼寫?會和純CSS寫法差很多嗎?

寫過CSS的朋友都知道, CSS並不像是其他程式語言 擁有類似變數、條件等方式來撰寫, 僅只能一行行來進行編輯,所以當今天有很多地方需要去做修正時, 就必須花很...

2013-09-17 ‧ 由 廖洧杰 分享
DAY 3

達標好文 30天掌握Sass語法 - (3)如何透過「變數」提升撰寫CSS效率

這一天要講的是SASS「變數功能」, 首先模擬一些寫純CSS容易會遇到的情境 1.一個網站內有四組文字連結顏色樣式,總CSS程式碼有5000行,有文字連結顏色的...

2013-09-18 ‧ 由 廖洧杰 分享
DAY 4

達標好文 30天掌握Sass語法 - (4)利用Sass「內建計算機」,讓你不用再重複計算CSS像素

Sass還有一個很特別的功能,也就是內建擁有加減乘除的語法, 但是,他究竟能支援設計師寫CSS什麼樣的工作呢? 首先我們先來假設情境: 1.你的網頁寬度是100...

2013-09-19 ‧ 由 廖洧杰 分享
DAY 5

30天掌握Sass語法 - (5)利用Sass「@import」進行CSS檔案模組切割

在以往寫CSS時, 動輒數百、數千行, 寫多了就會很難找各CSS片段的位置, 且滾輪都必須滾很久才會找到對應的程式碼, 所以都會在CSS上寫註解, 至少用搜尋或...

2013-09-20 ‧ 由 廖洧杰 分享
DAY 6

達標好文 30天掌握Sass語法 - (6)利用Sass「@mixin」,讓你省去重複撰寫相同CSS樣式的時間

在以前寫CSS的時候, 我們時常會遇到以下的情境, 在開發多種CSS樣式時,會講第一次寫的程式碼複製貼上後, 再進行修改,但當樣式整個大修時(例:圓形改方形),...

2013-09-21 ‧ 由 廖洧杰 分享
DAY 7

達標好文 30天掌握Sass語法 - (7)利用Sass「@extend」,讓你無痛合併CSS樣式

有的時候我們為了不要讓CSS太龐大, 所以有class用到相同樣式時, 都會將其合併起來, 如下CSS碼: /* 第200行位置 */ .header h1,...

2013-09-22 ‧ 由 廖洧杰 分享
DAY 8

達標好文 30天掌握Sass語法 - (8)Sass、Compass環境安裝流程教學

之後會講到Compass的功能, 它是一個支援Sass的強大工具, 所以這裡就順道講一下該如何在windows的環境下使用Sass, 同時錄製安裝流程影片,提供...

2013-09-23 ‧ 由 廖洧杰 分享
DAY 9

30天掌握Sass語法 - (9)如何逐步建立自己的CSS資料庫

今日教學重點: (1)用_mixin.sass來整理自己曾經寫過的CSS (2)使用Compass CSS3一鍵匯出多種瀏覽器支援語法 (3)你相信嗎?Comp...

2013-09-24 ‧ 由 廖洧杰 分享
DAY 10

達標好文 30天掌握Sass語法 - (10)如何建立自己的Sass Reset CSS

以目前坊間最有名的Reset CSS不外乎是 myer所發表的Reset.css http://meyerweb.com/eric/tools/css/rese...

2013-09-25 ‧ 由 廖洧杰 分享