學習之路/CSS擴展語言SASS

CSS擴展語言SASS學習

歡迎閱讀我全部的學習之路系列文章： 學習之路系類文章目錄

介紹

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

百科： Sass 擴展了 CSS3，增長了 嵌套、變量、混入、選擇器、繼承 等等特性。 Sass 生成良好格式化的 CSS 代碼，易於組織和維護。 SASS是對CSS3（層疊樣式表）的語法的一種擴充，它可使用巢狀、混入、選擇子繼承等功能，能夠更有效有彈性的寫出Stylesheet。 Sass最後仍是會編譯出合法的CSS讓瀏覽可使用，也就是說它自己的語法並不太容易讓瀏覽器識別（雖然它和CSS的語法很是的像，幾乎同樣），由於它不是標準的CSS格式，在它的語法內部可使用動態變量等，因此它更像一種極簡單的動態語言。

環境安裝

使用方式2種：一、Applicaition(使用工具軟件)；二、Command Line(命令行)。

我使用的Mac,而且我選擇使用第2種方式。

SASS的編譯依賴Ruby,因此須要先安裝Ruby.

Linux

是可使用系統的包管理工具或者rbenv、 rvm進行安裝.

Windows

安裝Windows版本的ruby，Rubyinstaller

Mac

Mac系統自帶ruby無需特別安裝

安裝好Ruby以後，使用如下命令檢查是否安裝正確

$ ruby -v
--
ruby 2.0.0p645 (2015-04-13 revision 50299) [universal.x86_64-darwin15]
$ gem -v
--
2.0.14

命令

在準備好Ruby環境以後

安裝

$ gem install sass

若是在Mac或者Linux下執行報權限問題，請在命令前加 sudo 獲取root權限.

查看版本

$ sass -v
--
Sass 3.4.19 (Selective Steve)

編譯SASS文件

將sass文件編譯爲CSS文件

$ sass input.sass output.css

監控sass文件變化，並實時編譯成CSS文件

$ sass --watch input.sass:output.css

也能夠監控文件夾的方式來實時編譯CSS文件，如把app/sass目錄實時編譯到public/css中

$ sass --watch app/sass:public/css

基本語法

SASS的語法比較簡單，包括：

• Variables(變量)
• Nesting(嵌套)
• Import(文件引入)
• Maxins(混入)
• Extend/Inheritance(擴展和繼承)
• Operators(運算符)

Variables(變量)

那些在樣式中能夠進行復用的值均可以設置爲變量，例如：字體，顏色等。

$font-stack:    Helvetica, sans-serif
$primary-color: #333

body
  font: 100% $font-stack
  color: $primary-color

以上SASS代碼編譯成CSS代碼以後結果以下：

body {
  font: 100% Helvetica, sans-serif;
  color: #333;
}

Nesting(嵌套)

SASS使咱們能夠像HTML結構嵌套同樣使用樣式。

nav
  ul
    margin: 0
    padding: 0
    list-style: none

    li
      display: inline-block

      a
        display: block
        padding: 6px 12px
        text-decoration: none

以上SASS代碼，結構嵌套一個導航的結構樣式，提升了代碼更有可讀性，編譯後的CSS代碼以下：

nav ul {
  margin: 0;
  padding: 0;
  list-style: none; }
  nav ul li {
    display: inline-block; }
    nav ul li a {
      display: block;
      padding: 6px 12px;
      text-decoration: none; }

Import(文件引入)

css雖然也提供了@import引入外部文件，可是會增長HTTP請求。而SASS提供的@import文件引入是將全部的文件最終合併到一個CSS文件中，多個文件引入最終只有一個HTTP請求。

_reset.sass

html,
body,
ul,
ol
  margin:  0
  padding: 0

base.sass

@import reset

body
  font: 100% Helvetica, sans-serif
  background-color: #efefef

編譯後的css文件以下

html, body, ul, ol {
  margin: 0;
  padding: 0;
}

body {
  font: 100% Helvetica, sans-serif;
  background-color: #efefef;
}

Maxins(混入)

能夠理解爲Maxin混入是在sass中方法定義和調用，能夠經過定義一個能夠複用的方法，進行調用。 例如：能夠咱們定義一個Maxin爲border-radius實現對全部瀏覽器廠商的支持，重複使用此Maxin能夠減小編寫重複的代碼

=border-radius($radius)
  -webkit-border-radius: $radius
  -moz-border-radius:    $radius
  -ms-border-radius:     $radius
  border-radius:         $radius

.box
  +border-radius(10px)

其中經過=號定義一個Maxin，經過+進行調用，編譯後的css以下：

.box {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  border-radius: 10px;
}

Extend/Inheritance(擴展和繼承)

這裏的擴展和繼承，能夠理解爲面向對象思想中的繼承，咱們能夠定義通用的樣式基類，而後擴展出不一樣的子類，這些擴展的子類就繼承了基類的全部樣式。

.message
  border: 1px solid #ccc
  padding: 10px
  color: #333


.success
  @extend .message
  border-color: green


.error
  @extend .message
  border-color: red


.warning
  @extend .message
  border-color: yellow

其中.message是樣式基類，擴展子類.success,.error,.warning都繼承至.message並擁有其樣式屬性。 以上sass編譯以後獲得的css以下：

.message, .success, .error, .warning {
  border: 1px solid #cccccc;
  padding: 10px;
  color: #333;
}

.success {
  border-color: green;
}

.error {
  border-color: red;
}

.warning {
  border-color: yellow;
}

Operators(運算符)

在css編寫過程當中，一些基本的數學運算是很是有用的。基本的數據運算包括：＋－＊／％。 例如咱們在設置內容和邊欄佈局的時候能夠有以下sass寫法：

.container
  width: 100%

article[role="main"]
  float: left
  width: 600px / 960px * 100%


aside[role="complimentary"]
  float: right
  width: 300px / 960px * 100%

以上咱們就編寫了一個960像素寬的響應式網格佈局，編譯後的css以下：

.container {
  width: 100%;
}

article[role="main"] {
  float: left;
  width: 62.5%;
}

aside[role="complimentary"] {
  float: right;
  width: 31.25%;
}

總結

以上內容就是sass的最基本的知識點和使用方式，可是在應用到實際的開發環境中的時候，並不會單獨的使用sass。通常會輔以其餘相關的構建工具，在接下來的學習中，我會去探索如何在實際的項目中應用sass。