sass

Sass是一款強(qiáng)化css的輔助工具，他在css語法中的基礎(chǔ)上增加了變量（variables）、嵌套（nested rules）、混合（mixns）、導(dǎo)入（inline impoarts）等高級功能，這些拓展令css更加強(qiáng)大和優(yōu)雅。使用sass的樣式庫（如compass）有助于更好的組織管理樣式文件，以及更高效的開發(fā)項目。

1、特色功能（features）

• 完全兼容css3
• 在css基礎(chǔ)上增加變量、嵌套（nesting）、混合（mibxins）等功能
• 通過函數(shù)進(jìn)行顏色值與屬性值得運算
• 提供控制指令（control directives）等高級功能

2、語法格式（stntax）

• SCSS(Sassy CSS)--這種格式僅在CSS3語法的基礎(chǔ)上進(jìn)行拓展，所有CSS3語法在CSS3語法在SCSS中都是通用的，同時加入Sass的特色功能。此外，SCSS也支持大多數(shù)CSS hacks寫法以及瀏覽器前綴寫法。這種格式以.scss作為拓展名。
• Sass,被稱為縮進(jìn)格式（indented Sass）通常簡稱“Sass”，是一種簡化格式。它使用“縮進(jìn)”代替“花括號”表示屬性屬于某個選擇器，用“換行”代替“分號”分隔屬性，很多人認(rèn)為這樣做比SCSS更容易閱讀，書寫也更快速。縮進(jìn)格式也可以使用Sass的全部功能，只是與SCSS相比個別地方采取了不同的表達(dá)方式。

3、css功能拓展（）

• 嵌套規(guī)則：Sass允許將一套css樣式嵌套進(jìn)另一套樣式中，內(nèi)層的的樣式將它外層的選擇器作為父類選擇器，例如：

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

編譯為：

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

嵌套功能避免了重復(fù)輸入父選擇器，而且令復(fù)雜的CSS結(jié)構(gòu)更易于管理。

#main{ width:97%;p,div{font-size:2em;a{font-weight:bold;}}pre{font-size:3em;}}

編譯為：

#main{width:97%;}#main p,#main div{font-size:2em;}#main p a,#main div a{font-weight:bold;} #main pre{font-size:3em;}

• 父選擇器
  在嵌套CSS規(guī)則時，有時也需要直接使用嵌套外層的父選擇器，例如，當(dāng)給某個元素設(shè)定hover樣式時，或者當(dāng)body元素有某個classname時，可以用&代表嵌套規(guī)則外層的父選擇器。

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

編譯為

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

編譯后的CSS文件中&將被替換成嵌套外層的父選擇器，如果含有多層嵌套，最外層的父選擇器會一層一層向下傳遞；

#main{color: black;a{font-weight:bold;&:hover{color:red;}}}

編譯為：

#main {color:black;}#main a{font-weight:bold;}#main a:hover{color:red;}

&必須作為選擇器的第一個字符。其后可以跟隨后綴生成復(fù)合的選擇器，例如：

#main{color:black;&-sidebar{border:1px solid;} }

編譯為：

#main{color:black;} #main-sidebar{border:1px solid; }

當(dāng)父選擇器含有不合適的后綴時，Sass將會報錯。

• 屬性嵌套
  有些CSS屬性遵循相同的命名空間（namespace）,比如：font-family,font-size,font-weight都以font作為屬性的命名空間。為了便于管理這樣的屬性，同時也為了避免重復(fù)輸入，Sass允許將屬性嵌套在空間中，例如：

.funky{ font:{family:fantasy;size:30em;weight:bold;}}

編譯為

.funky{font-family:fantasy;font-size:30em;font-weight:bold;}

命名空間也可以包含自己的屬性值，例如：

.funky{font:20px/24px{ //字體大小/行高family:fantasy;weight:bold;} }

編譯為：

.funky{font:20px/24px;font-size:fantasy;font-weight:bold;}

• 占位符選擇器%foo

  Sass額外提供了一種特殊類型的選擇器：占位符選擇器（placeholder selector）.與常用的id與class選擇器寫法相似，只是#或.替換成了%。必須通過@extend指令調(diào)用。

• 注釋/* /與//
  Sass支持標(biāo)準(zhǔn)的CSS多行注釋/ */,以及單行注釋//，前者會被完整輸出到編譯后的CSS文件中，而后者則不會，

• 變量
  SassScript最普遍的用法就是變量吧，變量以美元符號開頭，賦值方法與CSS屬性的寫法一樣。

$width:5em;

直接使用即調(diào)用變量：

#main{width:$width;}

變量支持塊級作用域，嵌套規(guī)則內(nèi)定義的變量只能在嵌套規(guī)則內(nèi)使用（局部變量），不在嵌套規(guī)則內(nèi)定義的變量則可在任何地方使用（全局變量）。將局部變量轉(zhuǎn)換為全局變量可以添加!global聲明：

#main{$width:5em !global;width:$width;}#sidebar{width:$width;}

編譯為：

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

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

總結(jié)

以上是生活随笔為你收集整理的Sass基础知识及语法的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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