[TOC] > [參考](https://www.cnblogs.com/wangpenghui522/p/5467560.html) ## Sass與Scss是什么關系? Sass的縮排語法，對于寫慣css前端的web開發者來說很不直觀，也不能將css代碼加入到Sass里面，因此sass語法進行了改良，Sass 3就變成了Scss(sassy css)。與原來的語法兼容，只是用{}取代了原來的縮進。 ## 編譯環境不一樣 Sass的安裝需要Ruby環境，是在服務端處理的，而Less是需要引入less.js來處理Less代碼輸出css到瀏覽器，也可以在開發環節使用Less，然后編譯成css文件 ## 變量符不一樣，Less是@，而Scss是$，而且變量的作用域也不一樣 Less ``` @color: #00c; /* 藍色 */ #header { @color: #c00; /* red */ border: 1px solid @color; /* 紅色邊框 */ } #footer { border: 1px solid @color; /* 藍色邊框 */ } Less-作用域編譯后 #header{border:1px solid #cc0000;} #footer{border:1px solid #0000cc;} ``` scss ``` scss-作用域 $color: #00c; /* 藍色 */ #header { $color: #c00; /* red */ border: 1px solid $color; /* 紅色邊框 */ } #footer { border: 1px solid $color; /* 藍色邊框 */ } Sass-作用域編譯后 #header{border:1px solid #c00} #footer{border:1px solid #c00} ``` ## 輸出設置，Less沒有輸出設置，Sass提供4中輸出選項：nested, compact, compressed 和 expanded * nested：嵌套縮進的css代碼 * expanded：展開的多行css代碼 * compact：簡潔格式的css代碼 * compressed：壓縮后的css代碼 ## Sass支持條件語句，可以使用if{}else{},for{}循環等等。而Less不支持。 ``` @if lightness($color) > 30% { } @else { } /* Sample Sass “for” loop */ @for $i from 1 to 10 { .border-#{$i} { border: #{$i}px solid blue; } } ``` ## 引用外部CSS文件 scss引用的外部文件命名必須以\_開頭, 如下例所示:其中\_test1.scss、\_test2.scss、\_test3.scss文件分別設置的h1 h2 h3。文件名如果以下劃線\_開頭的話，Sass會認為該文件是一個引用文件，不會將其編譯為css文件. ``` // 源代碼： @import "_test1.scss"; @import "_test2.scss"; @import "_test3.scss"; // 編譯后： h1 { font-size: 17px; } h2 { font-size: 17px; } h3 { font-size: 17px; } ``` Less引用外部文件和css中的@import沒什么差異。 ## 總結 Sass的功能比Less強大,基本可以說是一種真正的編程語言了， Less則相對清晰明了,易于上手,對編譯環境要求比較寬松。 考慮到編譯Sass要安裝Ruby,而Ruby官網在國內訪問不了,個人在實際開發中更傾向于選擇Less。