sass(scss) less stylus使用区别
sass(scss) 、less、 stylus等都是css预处理器
sass：是一种动态样式语言，比css多出了很多功能（如变量，计算，混入，颜色处理，函数，继承， 嵌套等），更易阅读，扩展名.sass
需要严格的遵循缩进的语法规则，不带{}和分号；
h1
color:red;
scss：是sass语法进行改良后的语法，兼容原来的语法，只是将原来的缩进排版方式改成了我们熟悉的{}，扩展名 .scss
h1{
color:red
}
less：Less也是一种动态语言，受sass影响很大，对css赋予了动态语言的特性，如变量，计算，继承，函数等。Less既可以在客户端运行（支持IE6+），也可以在服务端运行（借助nodejs）
h1{
color:red
}
stylus：主要是给node项目进行css预处理支持，人气不如前两个。扩展名是.styl
同时支持缩进和css常规书写方式，如下两种方式都是可以的
h1
color:red
h1{
color:red
}
变量：sass(scss)，less，stylus等让人们收益的一个重要特性就是变量的引入，我们可以把经常使用的css属性值，定义成一个变量，然后通过变量名来引用他们。
sass(scss) 变量必须以$开头，变量和值之间用：隔开，如：
$color:#fff；
h1{
border:1px solid $color
}
less变量必须以@开头，已经被赋值的变量及其他常亮（如像素，颜色等）都可以参与运算。
@color:#fff;
h1{
border:1px solid @color
}
stylus：可以以$开头或其他任何字符，但是不能以@开头。
$color = #ddd;
borderwidth = 1px;
h1{
border:borderwidth solid $color
}
嵌套：
sass(scss)，stylus，less等都支持嵌套
div {
ul{
li{
......
}
}
}
运算符：sass，less，stylus中都支持运算+ - * / %等。
body {
margin: (14px/2);
top: 50px + 100px; //150px 不能写100% - 10px sass stylus中不兼容 less中会计算成90%
right: 80 * 10%;
}
less中,calc以下两种方式都可以：
@width:10px;
calc(100% - @width)
calc(~"100% - 10px")
sass中，
cacl(100% - #{$width})
calc(100% - 10px)
stylus中：
calc(100% - 10px);
'calc(100% - %s)' % width;
'calc(100% - %s)' % width;
颜色处理 ： css预处理器一般都会内置一些颜色处理函数用来对颜色值进行处理，如加亮，变暗，颜色梯度等。
sass颜色预处理函数：
lighten($color, 10%); // 在给定颜色基础上变量10%
darken($color, 10%); // 在给定颜色基础上变暗10%
saturate($color, 10%); // 在给定颜色基础上饱和度增加10%
desaturate($color, 10%); // 在给定颜色基础上饱和度降低10%
grayscale($color); // 将该颜色转换为对应的灰度颜色
complement($color); // 将该颜色旋转180°之后的颜色
invert($color); // 和complement类似，获取颜色旋转180°之后的颜色，但是不能改变透明度
mix($color1, $color2, 50%); // color1按照50%比例和color2混合
less中颜色预处理函数
lighten(@color, 10%);
darken(@color, 10%);
saturate(@color, 10%);
desaturate(@color, 10%);
spin(@color, 10); // 色相值增加10
spin(@color, -10);
mix(@color1, @color2);
stylus中颜色预处理函数：
lighten(color, 10%)
darken(color, 10%);
saturate(color, 10%);
desaturate(color, 10%);
导入：
@import filepath
继承：
当我们需要为多个元素定义相同样式的时候，可以使用继承
.message{
border:1px solid red;
padding:10px;
}
sass中，通过@extend来实现代码组合申明，使代码更加优越整洁
.success{
@extend .message
border-color:green
}
less中：
.success{
.message
border-color:green
}
stylus中：
.success{
@extend .message
}
混入：
sass中可用mixin定义一些代码片段，且可传参数，方便日后根据需求调用，比如说处理css3的浏览器前缀：
@mixin error($borderwidth:2px){
border:$borderwidth solid red;
}
.message{
padding:4px;
@include error(5px);
}
less中，css的混入写法：
.error(@borderwidth:2px){
border:@borderwidth solid red;
}
.message{
padding:4px;
.error(5px);
}
stylus中，写法如下：
error(borderwidth=2px){
border:borderwidth solid red;
}
.message{
padding:4px;
error(5px)
}
高级语法：
1）条件语句
scss中 @if @if...@else if.....@else...
@mixin message($type:''){
@if $type==info{
color:green
} @else if $type==warning{
color:yellow
} @else{
color:red
}
}
.error{
@include message(error)
}
.info{
@include message(info)
}
less中，使用when实现条件语句
.mixin(@type) when(@type=error){
color:red
}
.mixin(@type) when(@type=warning){
color:yellow
}
.error{
.mixin(error)
}
.warning{
.mixin(warning)
}
stylus中，和js语法很相似 直接使用if...else if....else
error(type=''){
if type==error{
color:red;
} else if type==warning{
color:yellow;
}else{
color:green;
}
}
.error{
error(error)
}
.warning{
error(warning)
}
文件引用：
1）vue中导入外部样式文件，写法都差不多
区别：
1）编译环境不一样：
sass需要Ruby服务，是在服务端支持的
Less需要引入less.js来处理Less代码输出css到浏览器，也可以在开发环节使用less，编译成css，直接放到项目中。
stylus需要安装node，然后安装最新的stylus包即可。
2）变量符号不一样:
less是@， scss是$ stylus中的变量没有任何限制，可以$开头，结尾的;可有可无，但变量名和变量值之间的=是需要的。stylus变量不要使用@符号开头。
变量的调用方法是完全相同的。
3）变量的作用域不一样
sass中，变量分为局部作用域（嵌套规则内定义的变量）和全局作用域（不在嵌套规则内定义的变量）
$width:3px; // 全局作用域
.message{
$width:2px; // 局部作用域
border:$width solid red;
}
