Sass新手指南

什么是Sass？

Sass是一門非常優秀的CSS預處語言，他是由Hampton Catlin創立的。它可以減化CSS的工作流，使開發者更加容易開發，維護CSS樣式。

例如，你是否在特定的樣式表中查找和替換一個十六進制的顏色而煩惱？或者你正在尋找一個計算器為多欄布局的寬度計算而頭痛？（不用擔心，Sass能幫你解決這樣的煩惱）。

本文將介紹Sass的一些基本概念，比如說“變量”、“混合參數”、“嵌套”和“選擇器繼承”等。

Sass和CSS非常相似，但是在Sass中是沒有花括號（｛｝）和分號（；）的。

如下面的CSS：

#skyscraper_ad { 
  display: block; 
  width: 120px; 
  height: 600px; } 
#leaderboard_ad { 
  display: block; 
  width: 728px; 
  height: 90px; }

在Sass中，上面的CSS代碼你要寫成下面這樣：

#skyscraper_ad 
  display: block 
  width: 120px 
  height: 600px 
#leaderboard_ad 
  display: block 
  width: 728px 
  height: 90px

Sass使用兩個空格來定義嵌套的區別。

你現在看過了Sass是如何書寫的，接下來我們一起看一些Sass方面的介紹，讓Sass在你手中變得不再可怕。

變量（Variables）

在Sass中定義變量，是用“$”符號聲明，然后后面跟變量名稱。在這個例子中，定義變量“red”，在變量名后使用冒號（：），然后緊跟變量值：

$red: #ff4848

Sass還內置了函數功能，例如變暗（darken）和變亮（lighten），他們可以幫助你修改變量。

在這個例子中，段落要使用一個比“h1”標簽更深的紅色，就可以這樣使用：

$red: #ff4848$fontsize: 12px
h1
  color: $redp
  color: darken($red,10%)

你也可以在相同的變量上做加減運算的操作。如果我們想將顏色變黑，我們也可以在變量的基礎上減一個十六進制的顏色，例如“#101”。如果我們想把字號調大“10px”，我們也可以在字號的變量基礎上加上這個值。

/*加法和減法*/color: $red - #101font-size: $fontsize + 10px

嵌套（Nesting）

Sass有兩種嵌套規則：

選擇器嵌套

選擇器嵌套是Sass嵌套規則中的第一種。

Sass的嵌套類似于你的HTML嵌套：

$fontsize: 12px
.speaker
  .name
    font:
      weight: bold
      size: $fontsize + 10px
  .position
    font:
      size: $fontsize

如果你看了Sass生成的CSS，你可以看到“.name”嵌套在“.speaker”內，這里生成的CSS選擇器是“.speaker .name”。

.speaker .name {  font-weight: bold;
  font-size: 22px;}  .speaker .position {  font-size: 12px; }

屬性嵌套

屬性嵌套是Sass嵌套的第二種

相同前綴的屬性，你可以進行嵌套：

$fontsize: 12px
.speaker
  .name
    font:
      weight: bold
      size: $fontsize + 10px
  .position
    font:
      size: $fontsize

在上面的例子中，我們有一個“font:”，在新的一行增加兩個空格放置他的屬性（通常我們看到的是使用連字符“-”來連接）。

因此我們先寫“font:”屬性，然后斷行空兩格，寫“weight:”屬性，在CSS中就變成了“font-weight:”屬性。

.speaker .name {  font-weight: bold;
  font-size: 22px;}  .speaker .position {  font-size: 12px; }

所有連字符的選擇器都支持。

這種嵌套用來組織你的CSS結構是非常棒的，可以讓你不在寫一些重復的代碼。

混合（Mixins）

混合是Sass中另一個很優秀的特性。混合可以讓你定義一整塊的Sass代碼，甚至你可以給他們定義參數，更酷的是你還可以設置默認值。

使用關鍵詞“@mixin”來定義Sass的混合，你可以你自己的喜好定義一個混合的名稱。如果你需要設置一些參數，你還可以將參數設置到這些代碼片段中；如果你需要設置默認值，你也可以在混合的代碼片段中設置默認值。

調用混合代碼片段，可以使用Sass中的關鍵詞“@include”調用，并在其后面跟上你的混合代碼片段的名稱，你還可以使用括號，在里面設置一些參數。

來看一個簡單的例子：

@mixin border-radius($amount: 5px)
  -moz-border-radius: $amount
  -webkit-border-radius: $amount
  border-radius: $amounth1  @include border-radius(2px)
.speaker  @include border-radius

上面的Sass代碼將轉譯成下面的CSS代碼：

h1 {  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
  border-radius: 2px;}   .speaker {  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;}

我們給“h1”元素指定了一個特定的圓角值，但是并沒有給“.speaker”指定任何值，因此他將使用的是默認值“5px”。

選擇器繼承

選擇器的繼承可以讓你的選擇器繼承另一個選擇器的所有樣式風格，這是一個非常優秀的特性。

使用選擇器的繼承，要使用Sass的關鍵詞“@extend”，后而跟上你需要繼承的選擇器，那么這個選擇器就會繼承另一個選擇器的所有樣式。（當然他們是有繼承和被繼承的關系）

h1  border: 4px solid #ff9aa9.speaker  @extend h1
  border-width: 2px

上面的Sass代碼將轉譯成下面的CSS代碼：

h1,.speaker {  border: 4px solid #ff9aa9;}.speaker {  border-width: 2px;}

嘗試Sass

網上嘗試

如果你的本地電腦沒有安裝Sass，你可以在網上嘗試使用。

在轉譯之前，你需要選擇底部的“Indented Syntax”選項。

安裝

Sass是一個Ruby gem。如果你的本地已經安裝了Ruby gems，那么可以在你命令終端直接運行：

gem install sass

Sass也可以使用命令行工具將Sass文件轉譯成CSS文件。

你可以鍵入“sass --watch sass_folder:stylesheets_folder”，這個時候你的Sass文件（文件擴展名必須是.sass）stylesheets_folder就會把轉譯的樣式文件保存在“sass_folder”目錄，當然你的sass文件必須保存在這個文件目錄中。“--watch”選項的意思就是將這個目錄中的sass文件轉譯成樣式文件。

CSS轉換成Sass

在現有的項目中通過“sass-convert”使用sass。

在終端進入你的目錄中，鍵入“sass-convert --from css --to sass -R .”。將CSS轉換成Sass。其中“-R”表示遞歸，“.”表示當前目錄。

Scss

在這里我們只介紹了Sass的語法，然后還有一個新的名稱叫SCSS或者Sassy CSS。不同的是SCSS看起來更像CSS，但他也像Sass一樣具有變量、混合、嵌套和選擇器繼承等特性。

總結

在你組織和管理CSS時，Sass真的很優秀。還有個項目Compass,它在CSS框架中使用混合模式，而不是去修改你的HTML結構或者重新定義你的類名。

那你還在等什么呢？在你的下一個項目中就嘗試使用Sass吧。

譯者手語：整個翻譯依照原文線路進行，并在翻譯過程略加了個人對技術的理解。如果翻譯有不對之處，還煩請同行朋友指點。謝謝！

如需轉載煩請注明出處：

英文原文：http://blog.teamtreehouse.com/the-absolute-beginners-guide-to-sass

中文譯文：http://www.w3cplus.com/css/the-absolute-beginners-guide-to-sass.html