gulp
是工具链、构建工具，可以配合各种插件做js压缩，css压缩，less编译 替代手工实现自动化工作
1.构建工具
2.自动化
3.提高效率用
webpack
是文件打包工具，可以把项目的各种js文、css文件等打包合并成一个或多个文件，主要用于模块化方案，预编译模块的方案
1.打包工具
2.模块化识别
3.编译模块代码方案用
所以定义和用法上来说 都不是一种东西，无可比性 ，更不冲突！【当然，也有相似的功能，比如合并，区分，但各有各的优势】
1.变量
[plain] view plain copy
print?
| Sass | Less |
|---|---|
| $color: red; | @color: red; |
| div { | div { |
| color: $color; | color: @color; |
| } | </span> |
在定义变量和引用变量上Sass用的是$符号，而Less用的是@符号，但是用法相同。
但是两种语言在定义变量上的范围还是有区别的，如下：
[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> |
同样的代码，输出的结果却不同：
[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> |
可以发现Sass在unscoped里面真正引入的color值是white，而Sass里的white是前面scoped中重新定义的color变量，并且在scoped的background-color属性中引入的color也变成了white而不是black，笔者个人认为定义方式是类似同名变量重新赋值，使得color的值由black变成white。 而Less在scoped引入的值是自身局部里定义的color，作用范围仅限于整个scoped，而unscoped里没有重新定义color，只是引用了color，所以就引用的是属性为black的全局变量color。
2.嵌套选择器
Sass和Less的 &选择器允许在父标签中嵌套使用。
[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标记为mixin，在menu的a标签中引入bordered属性要加@include。
Less中直接创建一个bordered选择器，然后在a标签中直接引入。
4.含参数的Mixins/动态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); |
| } |
这点Sass和Less相似，都是在选择器内加参数，调用时传新参数时会在当前调用的标签或者选择器中覆盖原来的参数并使用。
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标签继承了bordered选择器的属性，使它拥有bordered选择器的所有属性。
