Sass 簡介

概念

Sass由hampton catlin設計，natalie weizenbaum於2006年開發，它能夠免費下載和使用。

Sass是一個將腳本解析成CSS的腳本語言（SassScript），也是一款CSS預處理器，它減小了CSS的重複，也所以節省了時間。

Sass 是對CSS3（層疊樣式表）的語法的一種擴充 Sass ，擴展了 CSS3，增長了規則、變量、混入、選擇器、繼承等屬性，生成了良好的格式化CSS代碼，便於代碼的維護和組織。

功能

• 徹底兼容 CSS 的全部版本
• 增長了變量、嵌套、混合等功能
• 經過函數進行顏色值與屬性值的運算
• 提供了控制指令（control directives）
• 自定義輸出格式

語法格式

Sass 有兩種語法格式：SCSS（Sassy CSS，較新的語法）和縮進語法（最開始的叫法）。

前者支持大多數 CSS hacks 寫法以及瀏覽器前綴寫法，以及早期的IE 濾鏡寫法，這種格式以 .scss 做爲擴展名；後者簡稱 Sass，是一種簡化格式，與 Haml 相似，使用縮進代替花括號來區分代碼（屬性表示某個選擇器）並用換行代替分號分隔屬性，用回車將不一樣規則分隔開，這樣相對來講它比 SCSS 更容易閱讀且書寫也較爲快速，它以 .sass 做爲擴展名。

Sass使用狀況

瀏覽器是不理解sass代碼的，所以咱們將須要一個sass預處理器來將sass代碼轉換爲標準css，這個過程稱爲運輸。因此，咱們須要給一個transpiler（某種程序）一些sass代碼，而後獲得一些css代碼。

提示：transpiling是一個術語，用於將用一種語言編寫的源代碼轉換/翻譯成另外一種語言。

Sass文件類型：Sass文件的擴展名爲 .scss。

Sass評論：Sass支持標準 CSS 註釋 /*comment*/，此外還支持內聯註釋 //comment。

/* 定義原色 */
    $defColor1: #f44586;
    $defColor2: green;
    
    /* 使用變量 */
    .main_use{
        background: $defColor2;  //在這裏咱們能夠設置內聯註釋
    }

增長特性

• 變量 Sass支持定義變量，變量以美圓符號（$）做爲開頭，用冒號（:）賦值。 支持四種數據類型：
  • 字符串
  • 數值
  • 布爾類型
  • 顏色 變量能夠用做函數的參數或者是返回值，在解釋的過程當中，解釋器會把變量的值寫入最終的CSS文件中。
• 嵌套（Nesting） SCSS 支持嵌套而且支持代碼塊的嵌套（CSS支持嵌套但不支持代碼塊的嵌套），它能夠清晰的表示元素之間的關係。
• 導入（@import） Sass 支持@import 指令，該指令容許咱們將一個文件的內容包含在另外一個文件中，該指令包含CSS文件，所以不須要額外的調用HTTP，而因爲性能問題，CSS指令每次調用都會建立一個額外的HTTP，在這裏Sass就沒有這樣的問題。
• 混入（mixin） Mixin包含一段合法Sass代碼，相似於C語言的宏定義；解釋器在調用mixin時會將它擴展成它所包含的完整Sass代碼，能夠有效的減小代碼重複，從而寫出的代碼更加乾淨簡潔。
• 繼承（@extend） 該指令容許咱們將一組CSS屬性從一個選擇器共享到另外一個選擇器。