http://sass-lang.com/

Sass是一種CSS預(yù)處理器語言，通過編程方式生成CSS代碼。因?yàn)榭删幊?#xff0c;所以操控靈活性自由度高，方便實(shí)現(xiàn)一些直接編寫CSS代碼較困難的代碼。
同時(shí)，因?yàn)镾ass是生成CSS的語言，所以寫出來的Sass文件是不能直接用的，必須經(jīng)過編譯器編譯成CSS文件才能使用。

Sass有什么好處？

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

如何開始使用Sass

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

Sass語法

先分清sass與scss

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

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

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

#div1width:50pxheight:30px

編譯后為如下css代碼：

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

選擇器嵌套

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

屬性嵌套
帶有相同前綴的屬性可進(jìn)行嵌套

#samplefont:size:12pxweight:bold

變量

$red:#f00 h1color:$red

函數(shù)

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

表達(dá)式

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

混合
重用代碼
使用@mixin關(guān)鍵字定義混合代碼，使用@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

沒有給出參數(shù)，會使用設(shè)置的默認(rèn)值

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

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

轉(zhuǎn)載于:https://www.cnblogs.com/royalxavier/p/5736669.html

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。