http://sass-lang.com/

Sass是一種CSS預處理器語言，通過編程方式生成CSS代碼。因為可編程，所以操控靈活性自由度高，方便實現一些直接編寫CSS代碼較困難的代碼。
同時，因為Sass是生成CSS的語言，所以寫出來的Sass文件是不能直接用的，必須經過編譯器編譯成CSS文件才能使用。

Sass有什么好處？

Sass的主要特性如下：變量、嵌套、導入、混合、繼承、運算、函數。這些特性為編寫CSS加入編程控制的能力。

如何開始使用Sass

直接使用任何文本或代碼編輯器都可以開始編輯Sass代碼，要將Sass文件轉換為CSS文件，則需使用Sass命令行編譯器或桌面集成編譯軟件。
安裝Sass編譯器
Sass編譯器使用Ruby環境，所以本地安裝使用Sass編譯器之前需要有Ruby環境，Ruby安裝另見...
Ruby環境準備完畢后，使用gem安裝Sass：
gem install sass

Sass語法

先分清sass與scss

Sass使用sass和scss這兩種后綴名以區分不同的語法格式：

• sass與普通CSS的語法格式區別較大，其不使用花括號和分號。
• scss接近普通CSS的語法格式，使用與CSS相同的花括號和分號。
  具體要使用哪種格式，

在sass格式中，取消花括號，改為使用二個空格縮進嵌套；取消分號，以行分隔。
以下sass代碼：

#div1width:50pxheight:30px

編譯后為如下css代碼：

#div1{ width:50px; height:50px; }

選擇器嵌套

#sample.spanfont-size:12pxfont-weight:bold

屬性嵌套
帶有相同前綴的屬性可進行嵌套

#samplefont:size:12pxweight:bold

變量

$red:#f00 h1color:$red

函數

.div1color:darken($red,10%)background:lighten($red,10%)

表達式

pcolor:$red - #101font-size:$fontsize+10px;

混合
重用代碼
使用@mixin關鍵字定義混合代碼，使用@include使用混合代碼
@mixin后面是定義混合的名字

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

沒有給出參數，會使用設置的默認值

選擇器繼承
使用@extend后面跟要繼承的選擇器

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

轉載于:https://www.cnblogs.com/royalxavier/p/5736669.html

總結

以上是生活随笔為你收集整理的Sass：一种CSS预处理器语言的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。