?1、sass安裝
? ? 因?yàn)閟ass是基于ruby寫的，所以首先必須安裝ruby。去ruby官網(wǎng)下載安裝ruby安裝包，在安裝過(guò)程中，勾選上添加到環(huán)境變量，這樣可以在安裝的時(shí)候自動(dòng)將安裝路徑添加到環(huán)境變量中。
? ? ruby安裝成功后，安裝sass，在命令行中輸入“gem ?install sass”進(jìn)行安裝。、
2、sass的編譯
? ? sass有兩種后綴名，一種是以“.sass”結(jié)尾的，另一種是以“.scss”結(jié)尾的，一般情況下，都是用后者。
? ? 將寫好的scss文件進(jìn)行編譯，編譯方法：可以在命令行中項(xiàng)目目錄下輸入“sass input.scss output.css?”.
? ? 還能實(shí)現(xiàn)實(shí)時(shí)自動(dòng)編譯：“sass --watch inpyt.scss:output.css”

我用的是webstorm編寫軟件，webstorm是支持sass編譯的，用webstorm安裝sass的方法可百度，很簡(jiǎn)單。
3、sass變量
? ? “$”:用來(lái)聲明變量，例如$blue:blue; ?變量可以直接使用，如：“div{color:$blue;}”，編譯過(guò)后----div{color : blue;}
? ? 變量也是有作用域的，分為全局作用域和局部作用域；如下：
? ? $blue:blue; ?//全局變量
? ? div{
????? ? $blue:blue; ?//局部變量
????? ? color:$blue;
????}
? ? 局部變量只在那一塊中起作用，不影響全局變量的定義。 也可以將局部變量轉(zhuǎn)換為全局變量，使用“!global”；如div{$blue:red !global; ? color:$blue;} ?a{ color: $blue; ?}
? ? 在sass中，變量名的定義既可以使用中劃線也可以使用下劃線，這兩者是互通的，意思就是說(shuō)，在變量定義的時(shí)候使用的是中劃線，在引用變量的時(shí)候可以使用下劃線，即將中劃線替換成下劃線。
4、嵌套css規(guī)則
? ? 使用sass可以進(jìn)行樣式的嵌套，使用css，有時(shí)候會(huì)要重復(fù)寫很多代碼，使用sass嵌套則可以減少很多代碼量。例子如下：
??#content { ? ??article {?
???????? h1 { color:?#333 }
?????????p { margin-bottom:?1.4em }?
???? }?
???? aside { #EEE }
?}?
?/* 編譯后 */
?#content article h1 { color: #333 }
?#content article p { margin-bottom: 1.4em }
?#content aside { 父選擇器的標(biāo)識(shí)符&
? ? 在sass中，對(duì)于簡(jiǎn)單的嵌套是沒(méi)問(wèn)題的，但如果涉及到父選擇器中使用偽類的話，簡(jiǎn)單的嵌套就行不通了，所以現(xiàn)在有個(gè)標(biāo)識(shí)符“&”?可以解決這個(gè)問(wèn)題。例如：
? ? article a{
????? ? color：blue?;
????? ? &:hover:red;
????}?
? ? //編譯過(guò)后
?????article?a?{ color: blue }
???article a:hover { color: red }
6、群組選擇器的嵌套
?????像 .button button會(huì)命中button元素和類名為.button的元素，這種選擇器叫做群組選擇器。群組選擇器的規(guī)則會(huì)對(duì)群組中任何一個(gè)選擇器的元素生效。例子如下所示：
????.container { ????????h1, h2, h3 {margin-bottom:?.8em} ????}?
????//編譯后
?????.container?h1,?.container?h2,?.container?h3?{ margin-bottom: .8em }
也可以是：
? ? ?nav, aside { ????????a {color: blue}
???????}
//編譯后
? ??nav?a,?aside?a?{color: blue}?
7、子組合選擇器和同層組合選擇器：>、+和~；
????????這仨個(gè)選擇器必須配合其他的選擇器一起使用，以制定瀏覽器僅選擇某種特定的上下文中的元素。
????? ? “>”選擇器?：選擇一個(gè)元素的直接子元素。
????? ? “+”選擇器：同層相鄰組合選擇器，即與一個(gè)元素相鄰的同一級(jí)的兄弟元素。
????? ? “~”選擇器：同層全體組合選擇器，即與一個(gè)元素處于同一級(jí)別的所有元素。?
? ? 各選擇器的用法如下所示：
? ??????article {
???????? ~ article { border-top:?1px dashed?#ccc }?
???????? > section { background:?#eee }?
???????? dl > {?
???????????? dt { color:?#333 }?
???????????? dd { color:?#555 }
?????????}?
???????? nav + & { margin-top:?0 }
????}
????//編譯后
?????article ~ article { border-top:?1px dashed?#ccc }
?????article > section{ background:?#eee }
?????article dl > dt { color:?#333 }
?????article dl > dd { color:?#555 }
?????nav + article { margin-top:?0?}
8、屬性嵌套
? ? 在sass中，除了選擇器的嵌套之外，還可以進(jìn)行屬性的嵌套。?
? ? 屬性嵌套的規(guī)則是：將屬性名從中劃線的地方斷開，在根屬性的后邊添加一個(gè)冒號(hào)：，緊跟一個(gè){}塊，然后把子屬性的部分寫在{}中，例子如下所示;
? ??????nav?{
???????? border: {
???????? style: solid;
???????? width: 1px;
???????? color: #ccc;
???????? }
?????}
????//編譯后
????nav?{ border-style: solid; border-width: 1px; border-color: #ccc;}??

屬性和選擇器的嵌套是非常大的特性，它不僅減少了代碼的編寫量，而且通過(guò)視覺(jué)上的縮進(jìn)使自己編寫的樣式結(jié)構(gòu)更加清晰，更易于閱讀和開發(fā)。?


9、 導(dǎo)入sass文件
?????在一個(gè)大型的項(xiàng)目中，必定會(huì)存在大量的css樣式，將這所有的樣式放在一起，看起來(lái)不美觀，所以需要將這些樣式拆分到多個(gè)文件中，sass可以實(shí)現(xiàn)這個(gè)功能，通過(guò)@import規(guī)則進(jìn)行樣式文件的引進(jìn)。css也有這個(gè)規(guī)則，只有執(zhí)行該規(guī)則的時(shí)候，瀏覽器才會(huì)去下載其他的css文件，這會(huì)導(dǎo)致頁(yè)面在加載的時(shí)候會(huì)很慢。
? ? 為@import命令專門編寫的sass文件，不會(huì)生成對(duì)應(yīng)的css文件，這樣的sass文件被稱為局部文件。
? ? sass局部文件一般是以下劃線開頭，當(dāng)@import一個(gè)局部文件時(shí)，不需要將文件的下劃線寫入，只需要將下劃線之后的名字導(dǎo)入即可。
?????9.1 默認(rèn)變量值
????? ? sass中可以使用!default標(biāo)簽來(lái)實(shí)現(xiàn)這個(gè)目的。
? ? 9.2 嵌套導(dǎo)入
?????????和原生的css不同，sass允許@import命令直接寫在css規(guī)則內(nèi)。例子如下：
?????????這是一個(gè)名為_blue-theme.scss的局部文件
????? ? ?aside?{

????????background:?blue;?color:?white;
?????}
? ? 把該文件導(dǎo)入到一個(gè)css規(guī)則內(nèi)，如下所示：
?????.blue-theme {@import?"blue-theme"}
?????//生成的結(jié)果跟你直接在.blue-theme選擇器內(nèi)寫_blue-theme.scss文件的內(nèi)容完全一樣。
????.blue-theme {?
???????? aside {?
?????????????background: blue;?
?????????????color:?#fff;?
???????? }
?????}
? ?9.3 原生的css導(dǎo)入
?????以下三種情況，在sass中使用@import命令，導(dǎo)入的時(shí)候，也會(huì)造成瀏覽器的額外下載。影響加載速度。
????? ? 1.被導(dǎo)入的文件名以.css結(jié)尾；
????? ? 2.被導(dǎo)入的文件名是一個(gè)URL地址（例如：http://www.sass.hk/css/css/css）；
????? ? 3.被導(dǎo)入的文件名是css的url()值。
? ?9.4 靜默注釋
?????sass提供了一種不同于css標(biāo)準(zhǔn)注釋格式/*.....*/的注釋語(yǔ)法，即靜默注釋3，其注釋內(nèi)容不會(huì)出現(xiàn)在生成的css文件中；sass有兩種注釋方法：
? ? ?1. ?/....../?:這種注釋方法的注釋內(nèi)容不會(huì)出現(xiàn)在相對(duì)應(yīng)生成的css文件中
?????2./*......*/:?這種注釋方法的注釋內(nèi)容會(huì)出現(xiàn)在相對(duì)應(yīng)生成的css文件中
? ? 但是當(dāng)注釋出現(xiàn)在不該出現(xiàn)的地方，如css屬性或選擇器中，這些注釋也會(huì)被抹掉，如下：
?????body {?
???? ????color?/* 這塊注釋內(nèi)容不會(huì)出現(xiàn)在生成的css中 */:?#333;
?? ? ? ??padding:?1;?/* 這塊注釋內(nèi)容也不會(huì)出現(xiàn)在生成的css中 */?0
?????}

? 保持sass的條理性和可讀性的最基本的三個(gè)方法：嵌套、導(dǎo)入、注釋。

轉(zhuǎn)載于:https://www.cnblogs.com/Shirley-1994/p/7048509.html

總結(jié)

以上是生活随笔為你收集整理的sass部分知识小结的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

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