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

我用的是webstorm編寫軟件，webstorm是支持sass編譯的，用webstorm安裝sass的方法可百度，很簡單。
3、sass變量
? ? “$”:用來聲明變量，例如$blue:blue; ?變量可以直接使用，如：“div{color:$blue;}”，編譯過后----div{color : blue;}
? ? 變量也是有作用域的，分為全局作用域和局部作用域；如下：
? ? $blue:blue; ?//全局變量
? ? div{
????? ? $blue:blue; ?//局部變量
????? ? color:$blue;
????}
? ? 局部變量只在那一塊中起作用，不影響全局變量的定義。 也可以將局部變量轉換為全局變量，使用“!global”；如div{$blue:red !global; ? color:$blue;} ?a{ color: $blue; ?}
? ? 在sass中，變量名的定義既可以使用中劃線也可以使用下劃線，這兩者是互通的，意思就是說，在變量定義的時候使用的是中劃線，在引用變量的時候可以使用下劃線，即將中劃線替換成下劃線。
4、嵌套css規則
? ? 使用sass可以進行樣式的嵌套，使用css，有時候會要重復寫很多代碼，使用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 { 父選擇器的標識符&
? ? 在sass中，對于簡單的嵌套是沒問題的，但如果涉及到父選擇器中使用偽類的話，簡單的嵌套就行不通了，所以現在有個標識符“&”?可以解決這個問題。例如：
? ? article a{
????? ? color：blue?;
????? ? &:hover:red;
????}?
? ? //編譯過后
?????article?a?{ color: blue }
???article a:hover { color: red }
6、群組選擇器的嵌套
?????像 .button button會命中button元素和類名為.button的元素，這種選擇器叫做群組選擇器。群組選擇器的規則會對群組中任何一個選擇器的元素生效。例子如下所示：
????.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、子組合選擇器和同層組合選擇器：>、+和~；
????????這仨個選擇器必須配合其他的選擇器一起使用，以制定瀏覽器僅選擇某種特定的上下文中的元素。
????? ? “>”選擇器?：選擇一個元素的直接子元素。
????? ? “+”選擇器：同層相鄰組合選擇器，即與一個元素相鄰的同一級的兄弟元素。
????? ? “~”選擇器：同層全體組合選擇器，即與一個元素處于同一級別的所有元素。?
? ? 各選擇器的用法如下所示：
? ??????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中，除了選擇器的嵌套之外，還可以進行屬性的嵌套。?
? ? 屬性嵌套的規則是：將屬性名從中劃線的地方斷開，在根屬性的后邊添加一個冒號：，緊跟一個{}塊，然后把子屬性的部分寫在{}中，例子如下所示;
? ??????nav?{
???????? border: {
???????? style: solid;
???????? width: 1px;
???????? color: #ccc;
???????? }
?????}
????//編譯后
????nav?{ border-style: solid; border-width: 1px; border-color: #ccc;}??

屬性和選擇器的嵌套是非常大的特性，它不僅減少了代碼的編寫量，而且通過視覺上的縮進使自己編寫的樣式結構更加清晰，更易于閱讀和開發。?


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

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

? 保持sass的條理性和可讀性的最基本的三個方法：嵌套、導入、注釋。

轉載于:https://www.cnblogs.com/Shirley-1994/p/7048509.html

總結

以上是生活随笔為你收集整理的sass部分知识小结的全部內容，希望文章能夠幫你解決所遇到的問題。

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