[SCSS] 一個讓我回不去過往寫css的語言

目錄

1. 英文縮寫
2. Scss 與 Sass 的差異？
3. Scss 解決原生 css 的問題
4. CSS hack

你無法直接使用 <link> 標籤，在HTML文件裡，嵌入scss檔案。你必須先將它編譯成為css檔案，才可以使用。
<link rel="stylesheet" href="style.scss" />

〈1〉英文縮寫 ✿ Css：Cascading StyleSheets
✿ Sass：Syntactically Awesome StyleSheets
✿ Scss：Sassy CSS

〈2〉Scss 與 Sass 的差異？ Sass 包括兩套語法。最開始的語法是「縮進語法」，也就是 sass，它不使用「大括弧{}」將不同的規則分開，不使用「分號；」將具體的樣式分開。

而較新的語法叫做 scss，使用和 css 一樣的巢狀語法。這兩套語法使用 .sass 和 .scss 兩個文件副檔名區分開。Scss 對於會寫 css 的人來說，比較容易上手。 ☞ Sass官方指南


〈3〉Scss 解決原生 css 的問題 ① 有巢狀寫法 (Nested Rules)
② 有變數 (Variables)
③ 可以寫方法重複使用 (Mixins)
④ 可以寫繼承 (Selector Inheritance)

〈4〉CSS hack 是指由於不同廠商的瀏覽器（譬如IE、Chrome、Safari、Mozilla Firefox等），或者同一廠商不同版本的瀏覽器（譬如IE6和IE7），對CSS的支援/解析有所差異，甚至完全迥異，而導致頁面的渲染效果大相逕庭。爲得到統一的頁面展示效果，開發者就需要針對不同的瀏覽器去寫各自的CSS代碼，讓其兼容不同瀏覽器環境。

---

Source

☞ 康曜資訊 | 2012網頁技術濃縮咖啡
☞ JASON LAM ROCKS | CSS Hack For Internet Explorer Compatibility
☞ Future Studio | May I introduce you to “Sassy CSS”?
☞ Augus's Blog | SCSS入門筆記
☞ 維基百科 | Sass
☞ visioncan | 使用scss來加速寫css吧!

Image Source

☞ Sass Tutorial