什麽是sass

Sass 是對 CSS 的擴展，讓 CSS 語言更強大、優雅。 它允許你使用變量、嵌套規則、 mixins、導入等眾多功能， 並且完全兼容 CSS 語法。 Sass 有助於保持大型樣式表結構良好， 同時也讓你能夠快速開始小型項目， 特別是在搭配 Compass 樣式庫一同使用時

【特點】

• 完全兼容 CSS3
• 在 CSS 語言的基礎上增加變量(variables)、嵌套 (nesting)、混合 (mixins) 等功能
• 通過函數進行顏色值與屬性值的運算
• 提供 控制指令等高級功能
• 自定義輸出格式

scss && sass

Sass 有兩種語法。 第一種被稱為 SCSS (Sassy CSS)，是一個 CSS3 語法的擴充版本。 也就是說，所有符合 CSS3 語法的樣式表也都是具有相同語法意義的 SCSS 文件。 另外，SCSS 理解大多數 CSS hacks 以及瀏覽器專屬語法，例如IE 古老的 filter 語法。 這種語種語法的樣式表文件需要以 .scss 擴展名。

第二種比較老的語法成為縮排語法（或者就稱為 "Sass"）， 提供了一種更簡潔的 CSS 書寫方式。

任一語法都可以導入另一種語法撰寫的文件中。 只要使用 sass-convert 命令行工具

[註意]本文使用scss語法

緩存

默認情況下，Sass 會自動緩存編譯後的模板（template）與 partials，這樣做能夠顯著提升重新編譯的速度，在處理 Sass 模板被切割為多個文件並通過 @import 導入，形成一個大文件時效果尤其顯著。

基礎規則

【註釋】

/* This comment is
 * several lines long.
 * since it uses the CSS comment syntax,
 * it will appear in the CSS output. */
body { color: black; }

// These comments are only one line long each.
// They won't appear in the CSS output,
// since they use the single-line comment syntax.
a { color: green; }
 

使用插值語句的註釋

$version: "1.2.3";
    /* This CSS is generated by My Snazzy Framework version #{$version}. */

編譯後：
/* This CSS is generated by My Snazzy Framework version 1.2.3. */

【嵌套規則】

Sass 允許將一個 CSS 樣式嵌套進另一個樣式中，內層樣式僅適用於外層樣式的選擇器範圍內

#main{
  color: #00ff00;
  width: 97%;
  .redbox {
    background-color: #ff0000;
    color: #000000;
  }
}

等同於
#main .redbox{}
 

【引用父選擇器 &】

a {
  font-weight: bold;
  text-decoration: none;
  &:hover { text-decoration: underline; }
  body.firefox & { font-weight: normal; }
}

[註意] $ 等於 a

【font命名空間】

CSS中有一些屬性遵循相同的“命名空間”；比如，font-family, font-size, 和 font-weight都在font命名空間中。在CSS中，如果你想在同一個命名空間中設置一串屬性，你必須每次都輸出來。Sass為此提供了一個快捷方式：只需要輸入一次命名空間，然後在其內部嵌套子屬性。

.funky {
  font: {
    family: fantasy;
    size: 30em;
    weight: bold;
  }
}
編譯為：
.funky {
  font-family: fantasy;
  font-size: 30em;
  font-weight: bold;
 }

帶屬性的命名空間

.funky {
  font: 20px/24px fantasy {
    weight: bold;
  }
}
編譯後
.funky {
  font: 20px/24px fantasy;
    font-weight: bold;
}

SassScript

除了普通的CSS屬性的語法，Sass 支持一些擴展，名為SassScript。SassScript允許屬性使用變量，算術和額外功能。SassScript可以在任何屬性值被使用。

SassScript也可以用來生成選擇器和屬性名稱，當編寫mixins時非常有用。這是通過 interpolation（插值） 完成。

【變量】

使用SassScript最直截了當的方法是使用變量。變量以美元符號開始，賦值像設置CSS屬性那樣：

$width: 5em;
#main {
  width: $width;
}

編譯為：
#main {
  width: 5em; 
}

數據類型

SassScript 支持 7 種主要的數據類型：

• 數字 (例如： 1.2, 13, 10px)
• 文本字符串，帶引號字符串和不帶引號字符串(例如："foo", ‘bar‘, baz)
• 顏色 (例如：blue, #04a3f9, rgba(255, 0, 0, 0.5))
• 布爾值 (例如： true, false)
• 空值 (例如： null)
• 值列表 (list)，用空格或逗號分隔 (例如： 1.5em 1em 0 2em, Helvetica, Arial, sans-serif)
• maps ，從一個值映射到另一個 (例如： (key1: value1, key2: value2))

【字符串】
CSS指定兩種字符串類型：帶引號的字符串（"Lucida Grande"） ， 還有不帶引號的字符串（sans-serif）SassScript 識別這兩種類型，並且一般來說，在編譯輸出的CSS文件中不會改變Sass文檔中使用的字符串類型。

[例外]當使用 #{} 時，帶引號的字符串將被編譯為不帶引號的字符串

@mixin firefox-message($selector) {
      body.firefox #{$selector}:before {
    content: "Hi, Firefox users!";
  }
}

@include firefox-message(".header");

編譯後：

body.firefox .header:before {
  content: "Hi, Firefox users!"; 
}

".header" 最終被編譯為 .header

【列表】
列表(lists) 是指 Sass 如何表示在CSS聲明的，類似margin: 10px 15px 0 0 或 font-face: Helvetica, Arial, sans-serif這樣的值，列表只是一串其他值，無論是用空格還是用逗號隔開。事實上，獨立的值也被視為列表：只包含一個值的列表。

列表本身沒有太多的功能，但是 SassScript list functions 使它們非常有用。nth 函數可以直接訪問列表中的某一項；join 函數可以將多個列表拼接在一起；append 函數可以將某項添加到列表中；@each 指令可以將添加樣式到列表中的每一項。

【Maps】
Maps代表一個鍵和值對集合，其中鍵用於查找值。他們可以很容易地將值收集到命名組中，並且可以動態地訪問這些組。在CSS中你找不到和他們類似的值，雖然他們的語法類似於媒體查詢表達式：

$map: (key1: value1, key2: value2, key3: value3);

和列表（Lists）不同，Maps必須始終使用括號括起來，並且必須用逗號分隔。Maps中的鍵和值可以是任意的SassScript對象。一個Maps可能只有一個值與給定的鍵關聯（盡管該值可以是一個列表）。一個給定的值可能與許多鍵關聯。

Maps的主要操作使用的是 SassScript 函數。map-get函數用於查找map中的值，map-merge函數用於添加值到map中的值， @each 指令可以用來為 map 中的每個鍵值對添加樣式。map中鍵值對的順序和map創建時始終相同。

[註意]需要註意的是 map 的建（keys）可以是任何 Sass 數據類型（甚至是另一個map），並且聲明map的語法允許是任意的SassScript表達式，這個表達式將被評估為一個值以確定建（keys）。

運算

所有數據類型的支持相等運算(== 和 !=)。此外，每種類型都有其自己特殊的運算方式。

【數字運算】
SassScript 支持對數字標準的算術運算（加法+，減法 - ，乘法*，除法/和取模%）。Sass 數學函數在算術運算期間會保留單位。這意味著，就像在現實生活中，你不能用不相同的單位數字進行算術運算（比如數字後面添加了px和em單位）

【除法和 /】
CSS允許 / 出現在屬性值之間作為分隔數字的方式，如下代碼

p.ex2{font:italic bold 12px/20px arial,sans-serif;})
12px/20px 是 font-size/line-height的簡寫形式

SassScript在以下幾種情況下會進行除法運算

• 使用了變量
• 使用了函數
• 使用了括號

p {
  font: 10px/8px;             // 原生的CSS，不作為除法
  $width: 1000px;
  width: $width/2;            // 使用了變量, 作為除法
  width: round(1.5)/2;        // 使用了函數, 作為除法
  height: (500px/2);          // 使用了括號, 作為除法
  margin-left: 5px + 8px/2px; // 使用了 +, 作為除法
  font: (italic bold 10px/8px); // 在一個列表（list）中，括號可以被忽略。
}

如果你想純CSS 的/ 和變量一起使用（即/不作為除法使用），你可以使用#{}插入他們。例如：

p {
  $font-size: 12px;
  $line-height: 30px;
  font: #{$font-size}/#{$line-height};
}

編譯後：
p {
  font: 12px/30px;
}

【減法，負數，和 -】
在CSS和在Sass中 - 有許多不同的意義。它可以是一個減法運算符（比如在5px - 3px中）
也可以表示一個負數（比如在-3px中）
還可以是一個一元負運算符（比如在-$var中）
或是標識符的一部分（比如在font-weight中）

那麽如何使用 - 呢？

• 減法的時候，你總是在 - 兩側保留空格。
• 當表示一個負數或一元負運算時候，在-前面包含一個空格，後面不加空格。
• 如果在一個空格隔開的list（列表）中，你可以將一元負運算使用括號括起來，比如在10px (-$var)中。

【顏色運算】
所有算術運算都支持的顏色值，顏色值的運算是分段進行計算的，也就是，依次計算紅（red），綠（green），以及藍（blue）的成分值。例如：

p {
  color: #010203 + #040506; // 計算 01 + 04 = 05, 02 + 05 = 07, 和 03 + 06 = 09，並且編譯為：
}

編譯後
p {
  color: #050709; 
}

【opacify和transparentize函數】
調整顏色的alpha通道可以使用

$translucent-red: rgba(255, 0, 0, 0.5);
    p {
      color: opacify($translucent-red, 0.3);
      background-color: transparentize($translucent-red, 0.25);
}

編譯後：
p {
  color: rgba(255, 0, 0, 0.8); // 0.5 + 0.3
  background-color: rgba(255, 0, 0, 0.25);//  直接使用0.25替代了0.5
}

【字符串運算】

運算可用於連接字符串

p {
  cursor: e + -resize;
}

編譯後：
p {
  cursor: e-resize; 
}

帶引號和不帶引號字符串加運算

p:before {
  content: "Foo " + Bar;
  font-family: sans- + "serif";
}

編譯後
p:before {
  content: "Foo Bar";
  font-family: sans-serif; 
}

【圓括號】
圓括號可以用來影響運算的順序(註：優先級)：

p {
  width: 1em + (2em * 3);
}

編譯後：
p {
  width: 7em; 
}

函數

SassScript定義了一些有用的函數， 這些函數可以像普通 CSS 函數語法一樣調用

todo:SassScript常用函數

插值

$name: foo;
$attr: border;
p.#{$name} {
    #{$attr}-color: blue;
}

編譯後：
p.foo {
  border-color: blue; 
}

使用插值來避免運算

p {
  $font-size: 12px;
  $line-height: 30px;
  font: #{$font-size}/#{$line-height};
}

編譯後：
p {
  font: 12px/30px; 
}

SassScript中的 &

就像當它在選擇器中使用一樣，SassScript中的&指向當前父選擇器。

.foo{
    &:hover{
        color:red;
    }
}

編譯後：
.foo:hover {
  color: red; 
}

變量默認

如果分配給變量的值後面添加了!default標誌 ，這意味著該變量如果已經賦值，那麽它不會被重新賦值，但是，如果它尚未賦值，那麽它會被賦予新的給定值。

$content: "First content";
$content: "Second content?" !default;
$new_content: "First time reference" !default;

#main {
  content: $content;
      new-content: $new_content;
}

編譯後：
#main {
  content: "First content"; // 使用了之前定義的
  new-content: "First time reference"; 
}

規則

Sass 支持所有CSS3的 @規則，以及一些已知的其他特定的Sass "指令"。

【@import】

Sass 擴展了 CSS @import規則，允許其導入 SCSS 或 Sass 文件。被導入的全部SCSS 或 Sass文件將一起合並到同一個 CSS 文件中。此外，被導入文件中所定義的任何變量或混入（mixins）都可以在主文件

可以正確導入scss或sass文件
@import "foo.scss";
@import "foo";

不能正確導入的形式
@import "foo.css";
@import "foo" screen;
@import "http://foo.com/bar";
@import url(foo);

@import支持導入多個文件語句

@import "rounded-corners", "text-shadow";

@import用在嵌套

example.scss 包含
.example {
  color: red;
}

如此引入：
#main {
  @import "example";
}

等同於
#main {
  .example {
      color: red;
    }
}

編譯後
#main .example {
  color: red;
}

[註意1]該指令只允許出現在文檔頂層（註：最外層，不在嵌套規則內）
[註意2]不允許在混人 (mixin) 或控制指令 (control directives) 中嵌套 @import

【@media】
Sass 中 @media 指令的行為和純 CSS 中一樣，只是增加了一點額外的功能：它們可以嵌套在CSS規則。如果一個@media 指令出現在CSS規則中，它將被冒泡到樣式表的頂層，並且包含規則內所有的選擇器。這使得很容易地添加特定media樣式，而不需要重復使用選擇器，或打亂樣式表書寫流。例如：

.sidebar {
  width: 300px;
  @media screen and (orientation: landscape) {
    width: 500px;
  }
}

編譯後：
.sidebar {
  width: 300px; 
}
@media screen and (orientation: landscape) {
  .sidebar {
      width: 500px; 
   } 
}

@extend

繼承另一個樣式

.error {
  border: 1px #f00;
  background-color: #fdd;
}
.seriousError {
  @extend .error;
  border-width: 3px;
}

編譯後：
.error, .seriousError {
  border: 1px #f00;
  background-color: #fdd;
}

.seriousError {
  border-width: 3px;
}

這意味著.error說定義的所有樣式也適用於.seriousError，除了.seriousError的特定樣式。相當於，每個帶有.seriousError類的元素也帶有.error類。

類（class）選擇，並不是唯一可以擴展。她可以擴展任何定義給單個元素的選擇器，如.special.cool, a:hover, 或 a.user[href^="http://"]。 例如：

.hoverlink {
  @extend a:hover;
}
a:hover {
  text-decoration: underline;
}

編譯後：
a:hover, .hoverlink {
  text-decoration: underline; 
}

警告指令

【@debug】

@debug指令打印SassScript表達式的值到標準的錯誤輸出流。這對於調試具有復雜SassScript 表達式的Sass文件非常有用的。

@debug 10em + 12em;

輸出：Line 1 DEBUG: 22em

【@warn】

@warn指令打印SassScript表達式的值到標準的錯誤輸出流。這對於警告用戶棄用庫 或 修復 mixin 輕微的錯誤是非常有用的。

使用示例

@mixin adjust-location($x, $y) {
  @if unitless($x) {
        @warn "Assuming #{$x} to be in pixels";
        $x: 1px * $x;
      }
      @if unitless($y) {
    @warn "Assuming #{$y} to be in pixels";
        $y: 1px * $y;
      }
      position: relative; left: $x; top: $y;
}

【@error】

@error指令拋出一個SassScript表達式的值作為一個致命的錯誤，其中包括一個不錯的堆棧跟蹤。這對於驗證混入（mixin）和函數的參數很有用。例如：

@mixin adjust-location($x, $y) {
  @if unitless($x) {
        @error "$x may not be unitless, was #{$x}.";
      }
      @if unitless($y) {
    @error "$y may not be unitless, was #{$y}.";
      }
      position: relative; left: $x; top: $y;
}

控制指令和表達式

SassScript支持一些基本控制指令和表達式，比如僅在在某些條件下包含樣式，或者包括相同的樣式幾次變化。

[註意]控制指令是一項高級功能，日常編寫過程中並不常用到，主要在 mixins（混合）指令中使用，尤其是像Compass這樣的庫。

【@if】
@if 指令需要一個SassScript表達和嵌套在它下面要使用的樣式，如果表達式返回值不為 false 或者 null ，那麽後面花括號中的內容就會返回：

p {
  @if 1 + 1 == 2 { border: 1px solid;  }
  @if 5 < 3      { border: 2px dotted; }
  @if null       { border: 3px double; }
}

編譯後：
p {
  border: 1px solid; 
}

@if 語句後面可以跟多個@else if語句和一個 @else 語句。 如果@if語句失敗，Sass 將逐條嘗試@else if 語句，直到有一個成功，或如果全部失敗，那麽會執行@else語句。 例如：

$type: monster;
p {
      @if $type == ocean {
        color: blue;
      } @else if $type == matador {
        color: red;
      } @else if $type == monster {
    color: green;
  } @else {
    color: black;
  }
}

編譯後：
p {
  color: green; 
}

【@for】
@for指令重復輸出一組樣式。對於每次重復，計數器變量用於調整輸出結果。該指令有兩種形式：
@for $var from through
@for $var from to

@for $i from 1 through 3 {
      .item-#{$i} { width: 2em * $i; }
}

編譯後：
.item-1 {
  width: 2em;
}
.item-2 {
  width: 4em; 
}
.item-3 {
  width: 6em; 
}

【@each】
@each指令通常格式是@each $var in 。$var可以是任何變量名，像$length 或者 $name，和是一個返回列表（list）或 map 的 SassScript 表達式。

@each $animal in puma, sea-slug, egret, salamander {
      .#{$animal}-icon {
        background-image: url('/images/#{$animal}.png');
  }
}

編譯後：
.puma-icon {
  background-image: url('/images/puma.png'); 
}
.sea-slug-icon {
  background-image: url('/images/sea-slug.png'); 
}
.egret-icon {
  background-image: url('/images/egret.png'); 
}
.salamander-icon {
  background-image: url('/images/salamander.png'); 
}

【遍歷Map】

@each $header, $size in (h1: 2em, h2: 1.5em, h3: 1.2em) {
  #{$header} {
        font-size: $size;
  }
}

編譯後：
h1 {
  font-size: 2em;
}
h2 {
  font-size: 1.5em; 
}
h3 {
  font-size: 1.2em; 
}

Mixin

混入(mixin)允許您定義可以在整個樣式表中重復使用的樣式，而避免了使用無語意的類（class），比如 .float-left。混入(mixin)還可以包含所有的CSS規則，以及任何其他在Sass文檔中被允許使用的東西。
他們甚至可以帶arguments，引入變量，只需少量的混入(mixin)代碼就能輸出多樣化的樣式。

【定義一個Mixin】

@mixin large-text {
  font: {
    family: Arial;
    size: 20px;
    weight: bold;
  }
  color: #ff0000;
}

@mixin clearfix {
  display: inline-block;
  &:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
  }
  * html & { height: 1px }
}

【引用混合指令@include】

.page-title {
  @include large-text;
  padding: 4px;
  margin-top: 10px;
}

編譯後：
.page-title {
  font-family: Arial;
  font-size: 20px;
  font-weight: bold;
  color: #ff0000;
  padding: 4px;
  margin-top: 10px; 
}

【mixin參數】

@mixin sexy-border($color, $width) {
  border: {
    color: $color;
    width: $width;
    style: dashed;
  }
}

p { @include sexy-border(blue, 100px); }

編譯後：
p {
  border-color: blue;
  border-width: 1in;
  border-style: dashed; 
}

【參數設置默認值】

@mixin sexy-border($color, $width: 1in) {
  border: {
    color: $color;
    width: $width;
    style: dashed;
  }
}
p { @include sexy-border(blue); }
h1 { @include sexy-border(blue, 2in); }

編譯後：
p {
  border-color: blue;
  border-width: 1in;
  border-style: dashed; 
}

h1 {
  border-color: blue;
  border-width: 2in;
  border-style: dashed; 
}

【可變參數】
有時，不能確定一個混入（mixin）或者一個函數（function）使用多少個參數。例如，用於創建盒子陰影（box-shadow）的一個混入（mixin）可以采取任何數量的box-shadow作為參數。

@mixin box-shadow($shadows...) {
      -moz-box-shadow: $shadows;
      -webkit-box-shadow: $shadows;
      box-shadow: $shadows;
}

.shadows {
  @include box-shadow(0px 4px 5px #666, 2px 6px 10px #999);
}

編譯後：
.shadows {
  -moz-box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
  -webkit-box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
  box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
}

【參數結合list map 使用】

@mixin colors($text, $background, $border) {
      color: $text;
      background-color: $background;
      border-color: $border;
}

$values: #ff0000, #00ff00, #0000ff;
.primary {
    @include colors($values...);
}

$value-map: (text: #00ff00, background: #0000ff, border: #ff0000);
.secondary {
    @include colors($value-map...);
}

編譯後：
.primary {
  color: #ff0000;
  background-color: #00ff00;
  border-color: #0000ff;
}

.secondary {
  color: #00ff00;
  background-color: #0000ff;
  border-color: #ff0000;
}

【mixin傳遞內容塊】

@mixin apply-to-ie6-only {
  * html {
    @content;
  }
}
@include apply-to-ie6-only {
  #logo {
    background-image: url(/logo.gif);
  }
}

編譯後：
* html #logo {
  background-image: url(/logo.gif);
}

【變量的作用域】

傳遞給混入（mixin）的內容塊在其被定義的作用域中進行運算，而不是混入（mixin）的作用域。

$color: white;
@mixin colors($color: blue) {
  background-color: $color;
  @content;
  border-color: $color;
}
.colors {
  @include colors { color: $color; }
}

編譯後：
.colors {
  background-color: blue; // 引用的mixin的變量值
  color: white; // 這裏引用的是全局的變量
  border-color: blue;// 引用的mixin的變量值
}

函數指令

Sass 支持自定義函數，並能在任何值或腳本上下文中使用

$grid-width: 40px;
$gutter-width: 10px;

@function grid-width($n) {
      @return $n * $grid-width + ($n - 1) * $gutter-width;
}

#sidebar { width: grid-width(5); }

編譯後：
#sidebar {
  width: 240px; 
}

調用方式

#sidebar { width: grid-width($n: 5); }

輸出格式

雖然Sass 默認的 CSS 輸出格式非常好，並且能反映文檔的結構，但是由於每個人的喜好和需求各不相同，因此Sass 支持其他幾種格式。Sass 允許您通過設置:style 選項 或使用 --style 命令行標誌，在四種不同的輸出格式之間進行選擇。

【:nested】

nested（嵌套）格式是 Sass 默認的輸出格式，因為它的格式反映CSS樣式與HTML文檔結構。每個屬性都獨占用一行，但縮排不是固定的。每個規則是基於它的何嵌套深度縮進。

#main {
  color: #fff;
  background-color: #000; }
  #main p {
    width: 10em; }

【:expanded】

expanded（擴展）格式更像是手寫的CSS樣式，每個屬性和規則都獨占用一行。在規則之內的屬性縮進的，但規則沒有任何特殊的縮進。例如：

#main {
  color: #fff;
  background-color: #000;
}
#main p {
  width: 10em;
}

【:compact】

compact（緊湊）格式比起nested（嵌套）或expanded（擴展）格式占據更小的空間。這種格式重點聚焦在選擇器上，不是它們的屬性。

#main { color: #fff; background-color: #000; }
#main p { width: 10em; }

【:compressed】

compressed（壓縮）格式占用盡可能小的空間，在該文件的末尾會有一個換行，並且除了必要的分隔選擇器之外，基本沒有多余空格，它還包括其他一些小的壓縮，比如選擇顏色最小的表示方式。

#main{color:#fff;background-color:#000}#main p{width:10em}

小結

本文內容全部來自sass文檔，通過查閱一遍文檔，基本上能掌握sass的一些常用用法。

css預編譯語言 sass scss（變量$var, css嵌套規則，@import規則，@extend，@mixin）