sass/scss 和 less的區別

一. Sass/Scss、Less是什么?

Sass (Syntactically Awesome Stylesheets)是一種動態樣式語言，Sass語法屬于縮排語法，比css比多出好些功能(如變量、嵌套、運算,混入(Mixin)、繼承、顏色處理，函數等)，更容易閱讀。

Sass與Scss是什么關系?

Sass的縮排語法，對于寫慣css前端的web開發者來說很不直觀，也不能將css代碼加入到Sass里面，因此sass語法進行了改良，Sass 3就變成了Scss(sassy css)。與原來的語法兼容，只是用{}取代了原來的縮進。

Less也是一種動態樣式語言. 對CSS賦予了動態語言的特性，如變量，繼承，運算，函數.??Less 既可以在客戶端上運行 (支持IE 6+, Webkit, Firefox)，也可在服務端運行 (借助 Node.js)。

二. Sass/Scss與Less區別

1.編譯環境不一樣

Sass的安裝需要Ruby環境，是在服務端處理的，而Less是需要引入less.js來處理Less代碼輸出css到瀏覽器，也可以在開發環節使用Less，然后編譯成css文件，直接放到項目中，也有 Less.app、SimpleLess、CodeKit.app這樣的工具，也有在線編譯地址。

2.變量符不一樣，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-作用域

$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和scss中的變量會隨著作用域的變化而不一樣。

3.輸出設置，Less沒有輸出設置，Sass提供4中輸出選項：nested, compact, compressed 和 expanded。

輸出樣式的風格可以有四種選擇，默認為nested

nested：嵌套縮進的css代碼

expanded：展開的多行css代碼

compact：簡潔格式的css代碼

compressed：壓縮后的css代碼

4.Sass支持條件語句，可以使用if{}else{},for{}循環等等。而Less不支持。

/*Sample Sass “if” statement*/

@if lightness($color) > 30%{

}@else{

}

/*Sample Sass “for” loop*/

@for $i from 1 to 10{

.border-#{$i} {

border:#{$i}px solid blue;

}

5. 引用外部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沒什么差異。

6.Sass和Less的工具庫不同

Sass有工具庫Compass, 簡單說，Sass和Compass的關系有點像Javascript和jQuery的關系,Compass是Sass的工具庫。在它的基礎上，封裝了一系列有用的模塊和模板，補充強化了Sass的功能。

Less有UI組件庫Bootstrap,Bootstrap是web前端開發中一個比較有名的前端UI組件庫，Bootstrap的樣式文件部分源碼就是采用Less語法編寫。

三. 總結

不管是Sass，還是Less，都可以視為一種基于CSS之上的高級語言，其目的是使得CSS開發更靈活和更強大，Sass的功能比Less強大,基本可以說是一種真正的編程語言了，Less則相對清晰明了,易于上手,對編譯環境要求比較寬松。考慮到編譯Sass要安裝Ruby,而Ruby官網在國內訪問不了,個人在實際開發中更傾向于選擇Less。

分類:技術對比

標簽:sass/scss 和 less的區別

?上一篇：AngularJS和ReactJS對比

?下一篇：網絡性能優化常用方法

常用鏈接

我的隨筆我的評論我的參與最新評論我的標簽

我的標簽

gulp(3)gulpfile(3)packjson(3)面試題(2)js性能優化(2)git(2)jQuery(2)員保項目(2)遠程調試(1)正則(1)更多

隨筆分類

CSS3 HTML5(1)JavaScript MobileApp(1)React WebSite 踩坑大全服務器端渲染技術對比(7)技術原理(1)架構優勢兼容性(3)開發工具開發環境搭建瀏覽器面試題命令行(1)前端工程化圖片性能優化(2)用戶體驗雜碎(1)裝機必備