CRMEB JAVA知識科普——Scss、Less是什么，如何區(qū)別？
CRMEB java版新零售社交電商系統(tǒng)，是一款基于Java + Uni-app 開發(fā)的新零售社交電商系統(tǒng)，系統(tǒng)代碼全開源無加密，獨立部署、二開方便，適用于企業(yè)新零售、批發(fā)、分銷、預約、O2O、多店等各種業(yè)務需求。
對于很多開發(fā)者在了解新零售社交電商系統(tǒng)我們的時候，對Scss、Less是什么，如何區(qū)別？下面就跟小編一起了解下。
一. Sass/Scss、Less是什么?
Sass (Syntactically Awesome Stylesheets)是一種動態(tài)樣式語言，Sass語法屬于縮排語法，比css比多出好些功能(如變量、嵌套、運算,混入(Mixin)、繼承、顏色處理，函數(shù)等)，更容易閱讀。
Sass的縮排語法，對于寫慣css前端的web開發(fā)者來說很不直觀，也不能將css代碼加入到Sass里面，因此Sass語法進行了改良，Sass 3就變成了Scss(Sassy CSS)。SCSS(Sassy CSS)是CSS語法的擴展。這意味著每一個有效的CSS也是一個有效的SCSS語句，與原來的語法兼容，只是用{}取代了原來的縮進。
Less也是一種動態(tài)樣式語言. 對CSS賦予了動態(tài)語言的特性，如變量，繼承，運算， 函數(shù). Less 既可以在客戶端上運行 (支持IE 6+, Webkit, Firefox)，也可在服務端運行 (借助 Node.js)。
二. Sass與Less區(qū)別
使用：
Less： less.bootcss.com/usage
Sass： www.sass.hk/docs
1、Less在JS上運行，Sass在Ruby上使用。
Sass有工具庫Compass, 簡單說，Sass和Compass的關系類似于像Javascript和jQuery的關系,Compass在Sass的基礎上，封裝了一系列有用的模塊和模板，補充強化了Sass的功能。
Less有UI組件庫Bootstrap,Bootstrap是web前端開發(fā)中一個比較有名的前端UI組件庫，Bootstrap的樣式文件部分源碼就是采用Less語法編寫。
2、編寫變量的方式不同。
Sass使用$，而Less使用@。
// Sass
$lightColor:#baf;
// Less
@lightColor:#baf;
3、Sass支持條件語句，可以使用if{}else{},for{}循環(huán)等等。而Less不支持。
4、輸出格式不一樣
Less無輸出格式，Sass可以使用特定的輸出格式
· nested：嵌套縮進的css代碼
· expanded：展開的多行css代碼
· compact：簡潔格式的css代碼
· compressed：壓縮后的css代碼
:nested
在執(zhí)行監(jiān)測(編譯)命令時，可以指定輸出格式為nested：
sass --watch styles.scss:styles.css --style nested
復制
nested格式下，輸出的CSS代碼:
div {
padding: 20px;
margin: 20px; }
.one {
background: red; }
.two {
background: yellow; }
nested是默認格式，可以不指定。
:expanded
展開格式看起來像開發(fā)人員手寫的格式。
要將CSS輸出設置為展開格式，可以使用如下命令:
sass --watch styles.scss:styles.css --style expanded
該格式下，輸出的CSS代碼:
div {
padding: 20px;
margin: 20px;
}
.one {
background: red;
}
.two {
background: yellow;
}
.three {
background: #ff8000;
}
:compact
緊湊格式占用的空間要小得多，每個CSS選擇符定義只占用一行。
要將CSS輸出設置為緊湊格式，可以使用如下命令:
sass --watch styles.scss:styles.css --style compact
該格式下，輸出的CSS代碼:
div { padding: 20px; margin: 20px; }
.one { background: red; }
.two { background: yellow; }
.three { background: #ff8000; }
:compressed
壓縮格式占用盡可能少的空間，選擇符定義不換行，文件最小，一般用于生產版本。
要將CSS輸出設置為壓縮格式，可以使用如下命令:
sass --watch styles.scss:styles.css --style compressed
該格式下，輸出的CSS代碼:
div{padding:20px;margin:20px}.one{background:red}.two{background:ye..........
5、引入外部CSS文件方法命名有一點不一樣
引入外部CSS文件
scss引用的外部文件命名必須以_開頭, 如下例所示:
其中_test1.scss文件名如果以下劃線開頭的話，Sass會認為該文件是一個引用文件，不會將其編譯為css文件。
6、混合不同 Mixins
Sass
/*聲明一個Mixin叫作“error”*/
@mixin error($borderWidth:2px){
border:$borderWidth solid #f00;
color: #f00;
}
/*調用error Mixins*/
.generic-error {
@include error();/*直接調用error mixins*/
}
Less
/*聲明一個Mixin叫作“error”*/
.error(@borderWidth:2px){
border:@borderWidth solid #f00;
color: #f00;
}
/*調用error Mixins*/
.generic-error {
.error();/*直接調用error mixins*/
}
7。繼承方法不一樣
sass的繼承：@extend
.block {
margin: 10px 5px;
padding: 2px;
}
p {
@extend .block;/*繼承.block選擇器下所有樣式*/
border: 1px solid #eee;
}
less的繼承：類似于mixins .block
.block {
margin: 10px 5px;
padding: 2px;
}
p {
.block;/*繼承.block選擇器下所有樣式*/
border: 1px solid #eee;
}
Less和Sass在語法上有些共性，比如下面這些：
1、混入(Mixins)——class中的class；
2、參數(shù)混入——可以傳遞參數(shù)的class，就像函數(shù)一樣；
3、嵌套規(guī)則——Class中嵌套class，從而減少重復的代碼；
4、運算——CSS中用上數(shù)學；
5、顏色功能——可以編輯顏色；
6、名字空間(namespace)——分組樣式，從而可以被調用；
7、作用域——局部修改樣式；
8、JavaScript 賦值——在CSS中使用JavaScript表達式賦值。
1、Sass在市面上有一些成熟的框架，比如說Compass，而且有很多框架也在使用Sass，比如說Foundation。
2、就國外討論的熱度來說，Sass絕對優(yōu)于LESS。
3、就學習教程來說，Sass的教程要優(yōu)于LESS。在國內LESS集中的教程是LESS中文官網，而Sass的中文教程，慢慢在國內也較為普遍。
4、Sass也是成熟的CSS預處理器之一，而且有一個穩(wěn)定，強大的團隊在維護。
5、同時還有Scss對sass語法進行了改良，Sass 3就變成了Scss(sassy css)。與原來的語法兼容，只是用{}取代了原來的縮進。
6、bootstrap（Web框架）最新推出的版本4，使用的就是Sass。
您如果還想了解更多JAVA知識，可以關注CRMEB官網-行業(yè)新聞。有更多實用的技術知識為您分享！
