Less 与 Sass 区别

Less 与 Sass 区别

1.底层实现

• less基于javascript（客户端）, 文件拓展名.less
• sass基于ruby（服务端）, 文件拓展名.scss

2.变量、作用域、插值

• less使用@标识符，在字符串中使用@{}插值，能识别 { }作用域

@color: red;
.pink{
    @color: pink;//此处颜色为粉色
    color: @color; 
}
.base{
    color: @color;//此处颜色为红色
}
'@{color}'

base中颜色为红色

• sass使用$标识符，在字符串中使用#{}插值，不能识别{ }作用域

$color: red;
.pink{
    $color: pink;
    color: $color;//此处颜色为粉色
}
.base{
    color: $color;//此处颜色为粉色
}
'#{color}'

base中颜色为粉色

3.混入及函数

• less使用.声明类，可直接调用及传参

.border(@width: 1px){
    border: @width solid #eee;
}
.base{
   .border;
}
.other{
    .border(2px);
}

• sass使用mixin声明类，使用include调用和传参

mixin border($width: 1px){
    border: $width solid #eee;
}
.base{
   include border;
}
.other{
    include border(2px);
}

3.sass支持继承@extend，%占位

.color{
    color: red;
}
%border($width: 1px){
    border: $width solid #eee;
}
.base{
   @extend .color;
}
.other{
    @extend %border;
}

4.sass支持条件@if/@else，循环@fo/@while，自定义函数@function

p {
　　@if 1 + 1 == 2 { border: 1px solid; }
　　@if 5 < 3 { border: 2px dotted; }
}

@if lightness($color) > 30% {
　　background-color: #000;
} @else {
　　background-color: #fff;
}

@for $i from 1 to 10 {
　　.border-#{$i} {
　　　　border: #{$i}px solid blue;
　　}
}

$i: 6;
@while $i > 0 {
　　.item-#{$i} { width: 2em * $i; }
　　$i: $i - 2;
}

@each $member in a, b, c, d {
　　.#{$member} {
　　　　background-image: url("/image/#{$member}.jpg");
　　}
}

@function double($n) {
　　@return $n * 2;
}
#sidebar {
    width: double(5px);
}

5.less支持JavaScript 赋值 ``

@string: 'howdy';
@var: ~`'@{string}'.topUpperCase()`; 

@height= `document.body.height`

6.sass和less都支持嵌套语法，都支持命名空间，都支持&，都支持数学运算、都支持调色