sass与less的区别

区别

1.语法不同

sass有两种语法格式 1. 以.scss为后缀名的嵌套写法 nav { $width: 100px; width: $width; color: $nav-color; } //-----------编译后 nav { width: 100px; color: #F90; } 2. 最早的缩进语法 nav width:100px; height:100px; 编译后也是一样的 less的语法格式嵌套写法 #header { color: black; .navigation { font-size: 12px; } .logo { width: 300px; } }

2.变量的声明不同

sass使用 $ $highlight-color: #F90; less使用 @ @nice-blue: #5B83AD; @light-blue: @nice-blue + #111; #header { color: @light-blue; }

3.Mixin不同

sass的用法与JavaScript的函数是一样的，定义后直接使用 @include调用

@mixin silly-links { a { color: blue; background-color: red; } } @include silly-links; //编译后 a { color: blue; background-color: red; }

less就是定义一个类，然后直接当函数使用(less不提供定义函数)

.b-coloe { border: 4px solid red; } .box { .b-coloe(); width: 100px; height: 200px; background-color: blue; } //编译后 .b-coloe { border: 4px solid red; } .box { border: 4px solid red; width: 100px; height: 200px; background-color: blue; }