Scss旅程(13) – 顏色(3)

今天是顏色這個大單元最後一部分,看完上次落落長的HSL,再看看這次要介紹的函式。

數量差有點大。(哎

雖然數量差頗大,但這次介紹的函式可以說是綜合了前兩篇的內容,所謂的一式多用就是這樣啊。

在正式開始前如想複習前兩篇,請往此走:

Scss旅程(11) – 顏色(1):以RGB為主的函式介紹

Scss旅程(12) – 顏色(2):以HSL為主的函式介紹

Continue reading “Scss旅程(13) – 顏色(3)”

Scss旅程(12) – 顏色(2)

今天延續之前的顏色,繼續介紹其他處理顏色相關的函式。

比起之前,今天介紹的函式做到的效果多了很多,當然介紹的內容也多了很多,各位別忘記盯著螢幕三十分鐘要記得望遠凝視一下喔

若有興趣一口氣看完函式,可以到官方直接看文件:Sass color (http://sass-lang.com/documentation/Sass/Script/Functions.html)

Continue reading “Scss旅程(12) – 顏色(2)”

Scss旅程(11) – 顏色(1)

今天要介紹的是Sass/Scss裡相當有趣的部分:顏色。

在一般的CSS裡使用顏色不外乎就是那十六進位的色碼,通常在設定顏色時,如果想更換顏色,就是查色碼表,然後換上另一個色碼。

當然在使用Scss時也是可以這樣用,但對於顏色部分,Scss提供了不少的「函式」可以拿來玩、不是,是可以拿來用,在修改顏色時多了不少的樂趣。

由於函式眾多,這部分會分成三週進行介紹,有興趣也可以到Sass官方直接看文件:Sass color (http://sass-lang.com/documentation/Sass/Script/Functions.html)

Continue reading “Scss旅程(11) – 顏色(1)”

Scss旅程(9) – 數學與邏輯運算

今天的旅程有兩個部分要介紹,分別是數學與邏輯運算

常在寫javascript或是曾經接觸過javascript,或者是接觸過其他語言,如C++、C等等的話,大概對這兩個部分都不會感到陌生,而這也是某貓決定跳這個大坑的其中一個原因!

原本還有一個函式(function),但篇幅太大了所以調成下一篇,敬請期待。

Continue reading “Scss旅程(9) – 數學與邏輯運算”

Scss旅程(8) – 格式、變數與繼承

今天的旅程有三個部分要介紹,分別是:

格式:除了之前說過的「巢狀結構」外,Scss還有某些撰寫的「規矩」需要注意。

變數:variable,寫過javascript的話對於這個單字應該不陌生,在scss裡善用變數,對於網站的更新(特別是那個顏色啊字型啊)會更加的輕鬆與快速。

繼承:extend,讓數個class或id可以「共用設定」的方法。

Continue reading “Scss旅程(8) – 格式、變數與繼承”

Scss旅程(7) – config.rb

看完上一個旅程,目前各位應該都可以自己手動開個compass專案了吧!

但開歸開,看著專案「自動(使用compass watch)」產生的css檔,再看看網站開啟的速度,會不會有「喔要是css檔會自動壓縮就好了」這種想法呢?

有的話,恭喜你!本週要介紹的config.rb檔(Windows的用戶應該看不到.rb這個副檔名,除非隱藏副檔名是關閉的)就可以幫工程師們達成這個要求,而且一點都不難!

Continue reading “Scss旅程(7) – config.rb”

Powered by WordPress.com.

Up ↑