基本的写法区别
less： 标准的css语法 ，有花括号和冒号

h1 {color: #0982C1;
}

sass： 当然也可以写成上面那样 同时也可以不写花括号

h1color: #0982c1

stylus： 花括号和冒号都可以不写 比较自由

h1color #0982C1

变量上的差异
Less 变量都是用@开头的

@maincolor : #092873;
@siteWidth : 1024px;
@borderStyle : dotted;
body {color: @maincolor;border: 1px @borderStyle @mainColor;max-width: @siteWidth;
}

sass变量必须是以$开头

$maincolor : #092873;
$siteWidth : 1024px;
$borderStyle : dotted;
body {color: $maincolor;border: 1px $borderStyle $mainColor;max-width: $siteWidth;
}

stylus的变量就没有那么多限制了 可以是 $，也可以是别的字符

嵌套写法相同
运算符也相同

body {margin: (14px/2);top: 50px + 100px;right: 80 * 10%;
}

继承extend
sass可通过@extend来实现代码组合声明

.message {border: 1px solid #ccc;padding: 10px;color: #333;
}
.success {@extend .message;border-color: green;
}

stylus同样也是通过@extend

.message {padding: 10px;border: 1px solid #eee;
}.warning {@extend .message;color: #E2E21E;
}

而 less里的继承更像是mixin写法

.message {border: 1px solid #ccc;padding: 10px;color: #333;
}
.success {.message;border-color: green;
}

混合mixin
sass的混合需要通过@include来实现

@mixin error($borderWidth: 2px) {border: $borderWidth solid #F00;color: #F00;
}
.generic-error {padding: 20px;margin: 4px;@ include error(); //这里调用默认 border: 2px solid #F00;
}

less的混合

.error(@borderWidth: 2px) {border: @borderWidth solid #F00;color: #F00;
}
.generic-error {padding: 20px;margin: 4px;.error(); //这里调用默认 border: 2px solid #F00;
}

stylus的混合

error(borderWidth= 2px) {border: borderWidth solid #F00;color: #F00;
}
.generic-error {padding: 20px;margin: 4px;error(); 
}

参考https://blog.csdn.net/pedrojuliet/article/details/72887490