Sass學習筆記--初識Sass

CSS 預處理器

• 「CSS 預處理器用一種專門的編程語言，進行 Web 頁面樣式設計，而後再編譯成正常的 CSS 文件，以供項目使用。
• 能夠在 CSS 中使用變量、簡單的邏輯程序、函數，等等在編程語言中的一些基本特性，使得CSS 更加簡潔、適應性更強、可讀性更佳，更易於維護。

Sass官方介紹(http://sass-lang.com/)

Sass is the most mature, stable, and powerful professional grade CSS extension language in the world.

SASS是最成熟的，穩定的，和在世界上強大的專業級的CSS擴展語言。

• 兼容性

Sass is completely compatible with all versions of CSS. We take this compatibility seriously, so that you can seamlessly use any available CSS libraries.

SASS是徹底兼容全部版本的CSS。咱們十分看重這種兼容，這樣就能夠無縫地使用任何可用的CSS庫。

• 特性豐富

Sass boasts more features and abilities than any other CSS extension language out there. The Sass Core Team has worked endlessly to not only keep up, but stay ahead.

Sass擁有比其餘任何CSS擴展語言有更多的功能和能力。咱們的核心團隊使sass一直處於發展與領先

• 成熟性

Sass has been actively supported for over 9 years by its loving Core Team.

Sass的核心團隊9年來不斷活躍地支持着這個項目

• 工業生產支持

Over and over again, the industry is choosing Sass as the premier CSS extension language.

一遍又一遍，行業選擇Sass做爲首要的CSS擴展語言。

• 社區龐大

Sass is actively supported and developed by a consortium of several tech companies and hundreds of developers.

SASS是積極支持並由幾個高科技公司和數百名開發者聯盟開發。

 Sass歷史

• 最初它是爲了配合 HAML而設計的，所以有着和 HTML 同樣的縮進式風格
• 雖然縮進式風格能夠有效縮減代碼量，強制規範編碼風格，但它一方面並不爲大多數程序接受

Sass與Scss

• 文件擴展名不一樣，Sass 是以「.sass」後綴爲擴展名，而 SCSS 是以「.scss」後綴爲擴展名
• 語法書寫方式不一樣，Sass 是以嚴格的縮進式語法規則來書寫，不帶大括號({})和分號(;)，而 SCSS 的語法書寫和咱們的 CSS 語法書寫方式很是相似。

  $font-stack: Helvetica, sans-serif  //定義變量
  $primary-color: #333 //定義變量
  
  body                         /*sass不帶有括號*/
    font: 100% $font-stack
    color: $primary-color

   

  $font-stack: Helvetica, sans-serif;
  $primary-color: #333;
  
  body {                        /*scss帶有括號*/
    font: 100% $font-stack;
    color: $primary-color;
  }

Sass安裝

　我使用的是linux系統，直接在terminal中進行

• 由於sass是使用ruby編寫的，首先安裝ruby

  # sudo apt install ruby 

• 安裝Sass

  # sudo gem install sass

• 更新Sass

  #sudo gem update sass

• 刪除Sass

  #sudo gem uninstall sass