【SCSS】如何使用SASS/SCSS？

SASS是一種撰寫CSS的「工具」(可能有其他更貼切的講法)，開發人員可以將寫好的SASS(SCSS)進行編譯後，產生給客戶端使用的CSS檔案。

對，你沒有看錯，就是開發人員，我指的就是開發CSS樣版的設計師/工程師。

SASS/SCSS並非讓CSS比較容易寫，而是讓CSS樣版開發更容易。維護也更容易。

而是否學習使用SASS/SCSS就不用了解CSS，答案當然是絕對否定。沒有CSS的概念和語法知識，SASS/SCSS完全就無法使用。

簡介就差不多至此，下面來分享如何使用SASS/SCSS的流程。(Windows環境)

1. 安裝 Ruby Installer (官網)
2. 啟動 Command Prompt with Ruby
3. 執行指令 [ gem install sass ] 安裝 sass
4. 執行指令 [ gem install compass ] 安裝 compass
5. 至此已將環境安裝完成
6. 建立一個main.scss檔案，裡面簡單打幾行css語法
7. 執行指令 [ sass main.scss main.css ] 進行編譯，就會取得 main.css 檔案

以上就是基本的使用教學，
後續還會有SASS/SCSS語言教學、Compass編譯、儲存自動編譯。

總之記得，客戶端最後還是使用CSS檔。

Read More

【網頁工具】在網頁上使用Google免費提供的「思源黑體」WebFont

Noto Sans TC (Chinese Traditional)

Noto is a font family that aims to support all languages in the world. This is the Sans Traditional Chinese family. It has Thin, Light, Regular, Medium, Bold and Black styles. For more information about Noto, go to google.com/get/noto

Noto Sans TC has been subsetted to the most frequent 7,800 Chinese characters in Traditional Chinese documents. 223 characters are added to cover all the characters in Taiwan's CNS 11643 P1 and 常用國字標準字體表 as well as Hong Kong's 常用字字形表 and IRG HB0 and HB1. In addition to Hanzi, Bopomofo, CJK Radicals, ASCII, punctuation marks and full-width characters are included. The full version can be downloaded in the link below. For more details, see Noto CJK Help.

Link

@import url(//fonts.googleapis.com/earlyaccess/notosanstc.css);

Example

font-family: 'Noto Sans TC', sans-serif;

SIL Open Font License, 1.1 | Download

來源：https://fonts.google.com/earlyaccess#Noto+Sans+TC

Read More

【CSS】過長的字省略為... (三個點)

DEMO

歡迎來到Jeff x Developer，這裡有許多小編在前端開發所用的技術紀錄。

CSS

div {
    overflow : hidden;
    text-overflow : ellipsis;
    white-space : nowrap;
    width : 200px;
}

補充說明：

該CSS效果只能應用在單行的情形，若要多行則必須在Server程式端或使用Javascript進行字串的處理。(超出某長度則截斷以...取代)

Read More