less跟sass

less 跟sass都是预解析器

less 是 @ sass是$

#app{
display:flex;
}

#app .inter{
  width:100px;

height:100px;
}

less写法

#app{
display:flex;
.inter{

  width:100px;
height:100px;
}
}

属性 定义 
@w:100px;

#app{
display:flex;
.inter{

  width:@w;
height:@w;
}
}

属性名定义 
@A:app;

#@{A}{
display:flex;
.inter{

  width:100px;
height:100px;
}
}

&使用//同级

#app{

.inter{

  width:100px;
height:100px;

&. item{
  width:100px;
height:100px;

}

&:hover:{
background:red;
}
}

}

提取公用的 css
@ import './a.css'
//a.css

.gongyong(){//加括号与不加括号的区别 就是  转成css时候 加括号 .gongyong不会出现，加则出现
width:100px;

height:100px;
}

#app{
display:flex;
.inter{

.gongyong()
}
}

//还有继承 .extend....