SASS概覽

1.安裝:

    sass須要使用ruby，首先安裝ruby，以後:

gem install sass

 

編譯:

sass input.scss output.css

2.快速入門：

1. 變量:

.scss

變量的定義:$highlight-color: #F90;

下劃線與分割線: $highlight-color===$highlight_color

          2. 嵌套css規則:

#content article h1 { color: #333 }

#content article p { margin-bottom: 1.4em }

#content aside { background-color: #EEE }

能夠這樣寫

#content {

  article {

    h1 { color: #333 }

    p { margin-bottom: 1.4em }

  }

  aside { text-indent:16.0pt">} 

         3.導入CSS文件

 

 

         4.註釋

            //

         5.Mixins(混合器)

@mixin rounded-corners {

  -moz-border-radius: 5px;

  -webkit-border-radius: 5px;

  border-radius: 5px;}

notice {

  background-color: green;

  border: 2px solid #00aa00;

  @include rounded-corners;

}

6. 使用選擇器繼承來精簡CSS;

//經過選擇器繼承繼承樣式

.error {

  border: 1px solid red;

  background-color: #fdd;

}

.seriousError {

  @extend .error;

  border-width: 3px;

}

7.小結

本文介紹了sass最基本部分.

變量是sass提供的最基本的工具。經過變量能夠讓獨立的css值變得可重用，不管是在一條單獨的規則範圍內仍是在整個樣式表中。變量、混合器的命名甚至sass的文件名，能夠互換通用_和-。

一樣基礎的是sass的嵌套機制。嵌套容許css規則內嵌套css規則，減小重複編寫經常使用的選擇器，同時讓樣式表的結構一眼望去更加清晰。sass同時提供了特殊的父選擇器標識符&，經過它能夠構造出更高效的嵌套。

sass的另外一個重要特性，樣式導入。經過樣式導入能夠把分散在多個sass文件中的內容合併生成到一個css文件，避免了項目中有大量的css文件經過原生的css @import帶來的性能問題。

經過嵌套導入和默認變量值，導入能夠構建更強有力的、可定製的樣式。混合器容許用戶編寫語義化樣式的同時避免視覺層面上樣式的重複。你不只學到了如何使用混合器減小重複，同時學習到了如何使用混合器讓你的css變得更加可維護和語義化。最後，咱們學習了與混合器相輔相成的選擇器繼承。繼承容許你聲明類之間語義化的關係，經過這些關係能夠保持你的css的整潔和可維護性。