CRMEB java版新零售社交電商系統(tǒng)，是一款基于Java + Uni-app 開(kāi)發(fā)的新零售社交電商系統(tǒng)，系統(tǒng)代碼全開(kāi)源無(wú)加密，獨(dú)立部署、二開(kāi)方便，適用于企業(yè)新零售、批發(fā)、分銷、預(yù)約、O2O、多店等各種業(yè)務(wù)需求。

對(duì)于很多開(kāi)發(fā)者在了解新零售社交電商系統(tǒng)我們的時(shí)候，對(duì)Scss、Less是什么，如何區(qū)別？下面就跟小編一起了解下。

一. Sass/Scss、Less是什么?

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

Sass的縮排語(yǔ)法，對(duì)于寫慣css前端的web開(kāi)發(fā)者來(lái)說(shuō)很不直觀，也不能將css代碼加入到Sass里面，因此Sass語(yǔ)法進(jìn)行了改良，Sass 3就變成了Scss(Sassy CSS)。SCSS(Sassy CSS)是CSS語(yǔ)法的擴(kuò)展。這意味著每一個(gè)有效的CSS也是一個(gè)有效的SCSS語(yǔ)句，與原來(lái)的語(yǔ)法兼容，只是用{}取代了原來(lái)的縮進(jìn)。

Less也是一種動(dòng)態(tài)樣式語(yǔ)言. 對(duì)CSS賦予了動(dòng)態(tài)語(yǔ)言的特性，如變量，繼承，運(yùn)算， 函數(shù).  Less 既可以在客戶端上運(yùn)行 (支持IE 6+, Webkit, Firefox)，也可在服務(wù)端運(yùn)行 (借助 Node.js)。

二. Sass與Less區(qū)別

使用：

Less： less.bootcss.com/usage

Sass： www.sass.hk/docs

1、Less在JS上運(yùn)行，Sass在Ruby上使用。

Sass有工具庫(kù)Compass, 簡(jiǎn)單說(shuō)，Sass和Compass的關(guān)系類似于像Javascript和jQuery的關(guān)系,Compass在Sass的基礎(chǔ)上，封裝了一系列有用的模塊和模板，補(bǔ)充強(qiáng)化了Sass的功能。

Less有UI組件庫(kù)Bootstrap,Bootstrap是web前端開(kāi)發(fā)中一個(gè)比較有名的前端UI組件庫(kù)，Bootstrap的樣式文件部分源碼就是采用Less語(yǔ)法編寫。

2、編寫變量的方式不同。
Sass使用$，而Less使用@。

//  Sass

$lightColor:#baf;

// Less

@lightColor:#baf;

3、Sass支持條件語(yǔ)句，可以使用if{}else{},for{}循環(huán)等等。而Less不支持。

4、輸出格式不一樣

Less無(wú)輸出格式，Sass可以使用特定的輸出格式

· nested：嵌套縮進(jìn)的css代碼

· expanded：展開(kāi)的多行css代碼

· compact：簡(jiǎn)潔格式的css代碼

· compressed：壓縮后的css代碼

:nested

在執(zhí)行監(jiān)測(cè)(編譯)命令時(shí)，可以指定輸出格式為nested：

sass --watch styles.scss:styles.css --style nested

復(fù)制

nested格式下，輸出的CSS代碼:

div {

  padding: 20px;

  margin: 20px; }

.one {

  background: red; }

.two {

  background: yellow; }

nested是默認(rèn)格式，可以不指定。

:expanded

展開(kāi)格式看起來(lái)像開(kāi)發(fā)人員手寫的格式。

要將CSS輸出設(shè)置為展開(kāi)格式，可以使用如下命令:

sass --watch styles.scss:styles.css --style expanded

該格式下，輸出的CSS代碼:

div {

  padding: 20px;

  margin: 20px;

}

.one {

  background: red;

}

.two {

  background: yellow;

}

.three {

  background: #ff8000;

}

:compact

緊湊格式占用的空間要小得多，每個(gè)CSS選擇符定義只占用一行。

要將CSS輸出設(shè)置為緊湊格式，可以使用如下命令:

sass --watch styles.scss:styles.css --style compact

該格式下，輸出的CSS代碼:

div { padding: 20px; margin: 20px; }

.one { background: red; }

.two { background: yellow; }

.three { background: #ff8000; }

:compressed

壓縮格式占用盡可能少的空間，選擇符定義不換行，文件最小，一般用于生產(chǎn)版本。

要將CSS輸出設(shè)置為壓縮格式，可以使用如下命令:

sass --watch styles.scss:styles.css --style compressed

該格式下，輸出的CSS代碼:

div{padding:20px;margin:20px}.one{background:red}.two{background:ye..........

5、引入外部CSS文件方法命名有一點(diǎn)不一樣

引入外部CSS文件

scss引用的外部文件命名必須以_開(kāi)頭, 如下例所示:

其中_test1.scss文件名如果以下劃線開(kāi)頭的話，Sass會(huì)認(rèn)為該文件是一個(gè)引用文件，不會(huì)將其編譯為css文件。

6、混合不同 Mixins

Sass

 /*聲明一個(gè)Mixin叫作“error”*/

@mixin error($borderWidth:2px){

  border:$borderWidth solid #f00;

  color: #f00;

}

/*調(diào)用error Mixins*/

.generic-error {

  @include error();/*直接調(diào)用error mixins*/

}

 

Less

/*聲明一個(gè)Mixin叫作“error”*/

.error(@borderWidth:2px){

  border:@borderWidth solid #f00;

  color: #f00;

}

/*調(diào)用error Mixins*/

.generic-error {

  .error();/*直接調(diào)用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在語(yǔ)法上有些共性，比如下面這些：

1、混入(Mixins)——class中的class；
2、參數(shù)混入——可以傳遞參數(shù)的class，就像函數(shù)一樣；
3、嵌套規(guī)則——Class中嵌套class，從而減少重復(fù)的代碼；
4、運(yùn)算——CSS中用上數(shù)學(xué)；
5、顏色功能——可以編輯顏色；
6、名字空間(namespace)——分組樣式，從而可以被調(diào)用；
7、作用域——局部修改樣式；
8、JavaScript 賦值——在CSS中使用JavaScript表達(dá)式賦值。

1、Sass在市面上有一些成熟的框架，比如說(shuō)Compass，而且有很多框架也在使用Sass，比如說(shuō)Foundation。

2、就國(guó)外討論的熱度來(lái)說(shuō)，Sass絕對(duì)優(yōu)于LESS。
3、就學(xué)習(xí)教程來(lái)說(shuō)，Sass的教程要優(yōu)于LESS。在國(guó)內(nèi)LESS集中的教程是LESS中文官網(wǎng)，而Sass的中文教程，慢慢在國(guó)內(nèi)也較為普遍。

4、Sass也是成熟的CSS預(yù)處理器之一，而且有一個(gè)穩(wěn)定，強(qiáng)大的團(tuán)隊(duì)在維護(hù)。

5、同時(shí)還有Scss對(duì)sass語(yǔ)法進(jìn)行了改良，Sass 3就變成了Scss(sassy css)。與原來(lái)的語(yǔ)法兼容，只是用{}取代了原來(lái)的縮進(jìn)。

6、bootstrap（Web框架）最新推出的版本4，使用的就是Sass。

您如果還想了解更多JAVA知識(shí)，可以關(guān)注CRMEB官網(wǎng)-行業(yè)新聞。有更多實(shí)用的技術(shù)知識(shí)為您分享！