Scss和Less的基本使用和区别

Less

• 变量 @

• 嵌套

• &代表父级

• .app{    
     &:hover{  
     
         }
  }

•  定义方法

• .border(@w,@color){
      .border:@w solid @color;
  }
  .app{
      .border(1px,red)
  }

  Scss

• 变量：$

  • $width:5px;

• 嵌套

• &:代表父级

• 混入用法

定义：
@mixin 方法名($width,$height){
    width:$width;
    height:$height;
}
调用：
  .app{
      @include 方法名(实参值1，实参值2)
  }

• 继承

定义
   %setBorder{
       border:1px solid red;
   }
使用：
  .app{  
      @extend %setBorder;
  }