gulp
是工具鏈官紫、構(gòu)建工具肛宋，可以配合各種插件做js壓縮，css壓縮束世，less編譯 替代手工實(shí)現(xiàn)自動(dòng)化工作
1.構(gòu)建工具
2.自動(dòng)化
3.提高效率用
webpack
是文件打包工具酝陈，可以把項(xiàng)目的各種js文、css文件等打包合并成一個(gè)或多個(gè)文件毁涉，主要用于模塊化方案沉帮，預(yù)編譯模塊的方案
1.打包工具
2.模塊化識(shí)別
3.編譯模塊代碼方案用
所以定義和用法上來說 都不是一種東西，無可比性 ，更不沖突穆壕！【當(dāng)然待牵，也有相似的功能，比如合并喇勋，區(qū)分缨该，但各有各的優(yōu)勢】
1.變量
[plain] view plain copy
print?
| Sass | Less |
|---|---|
| $color: red; | @color: red; |
| div { | div { |
| color: $color; | color: @color; |
| } | </span> |
在定義變量和引用變量上Sass用的是$符號，而Less用的是@符號川背，但是用法相同贰拿。
但是兩種語言在定義變量上的范圍還是有區(qū)別的，如下：
[plain] view plain copy
print?
| Sass | Less |
|---|---|
| $color: black; | @color: black; |
| .scoped { | .scoped { |
| $bg: blue; | @bg: blue; |
| $color: white; | @color: white; |
| color: $color; | color: @color; |
| background-color: $bg; | background-color: @bg; |
| } | } |
| .unscoped { | .unscoped { |
| color: $color; | color: @color; |
| // Would be an error | // Would be an error |
| // background: $bg; | // background: @bg; |
| } | }</span> |
同樣的代碼渗常，輸出的結(jié)果卻不同：
[plain] view plain copy
print?
| Sass Output | Less Output |
|---|---|
| .scoped { | .scoped { |
| color: white; | color: white; |
| background-color: blue; | background-color: blue; |
| } | } |
| .unscoped { color: white; } | .unscoped { color: black; }</span> |
可以發(fā)現(xiàn)Sass在unscoped里面真正引入的color值是white壮不，而Sass里的white是前面scoped中重新定義的color變量，并且在scoped的background-color屬性中引入的color也變成了white而不是black皱碘，筆者個(gè)人認(rèn)為定義方式是類似同名變量重新賦值，使得color的值由black變成white隐孽。 而Less在scoped引入的值是自身局部里定義的color癌椿，作用范圍僅限于整個(gè)scoped，而unscoped里沒有重新定義color菱阵，只是引用了color踢俄，所以就引用的是屬性為black的全局變量color。
2.嵌套選擇器
Sass和Less的 &選擇器允許在父標(biāo)簽中嵌套使用晴及。
[plain] view plain copy
print?
| Sass | Less |
|---|---|
| p { | p { |
| a { | a { |
| color: red; | color: red; |
| &:hover { | &:hover { |
| color: blue; | color: blue; |
| } | } |
| } | } |
| } | }</span> |
兩者的用法相同都办，不多說。
3.Mixins
[plain] view plain copy
print?
| Sass | Less |
|---|---|
| @mixin bordered { | .bordered { |
| border-top: dotted 1px black; | border-top: dotted 1px black; |
| border-bottom: solid 2px black; | border-bottom: solid 2px black; |
| } | } |
| #menu a { | #menu a { |
| @include bordered; | .bordered; |
| } | }</span> |
Sass中需要將bordered標(biāo)記為mixin虑稼，在menu的a標(biāo)簽中引入bordered屬性要加@include琳钉。
Less中直接創(chuàng)建一個(gè)bordered選擇器，然后在a標(biāo)簽中直接引入蛛倦。
4.含參數(shù)的Mixins/動(dòng)態(tài)Mixins
[plain] view plain copy
print?
| Sass | Less |
|---|---|
| @mixin bordered($width: 2px) { | .bordered(@width: 2px) { |
| border: $width solid black; | border: @width solid black; |
| } | } |
| #menu a { | #menu a { |
| @include bordered(4px); | .bordered(4px); |
| } |
這點(diǎn)Sass和Less相似歌懒，都是在選擇器內(nèi)加參數(shù)，調(diào)用時(shí)傳新參數(shù)時(shí)會(huì)在當(dāng)前調(diào)用的標(biāo)簽或者選擇器中覆蓋原來的參數(shù)并使用溯壶。
5.選擇器的繼承
在Less中不允許選擇器的繼承及皂，所以如下是Sass的介紹：
[plain] view plain copy
print?
|Sass | Less | CSS Output |
| ------------- |:-------------: |
|.bordered { | N/A | .bordered, #menu a { |
| border: 1px solid back; | | border: 1px solid back; } |
|} | | |
| | ||
|#menu a { | | |
| @extend .bordered; | | |
|} | | ||
這里很明顯的看到用@extend讓a標(biāo)簽繼承了bordered選擇器的屬性，使它擁有bordered選擇器的所有屬性且改。
