Css预处理器（less,sass,stylus）区别

less

变量  @bg:red    background:@bg;

minxin   .box(@line){}   div(.box()}

extend   .box(@line){}   div{extend .box}

嵌套   选择器嵌套、伪类嵌套  &（父级符号）

each循环、映射map、命名空间

@import...

\

scss

变量   $bg:red   background:$bg;

@minxin  box($line){}   div(@include box()}

extend   .box(@line){}   div{extend .box}

嵌套   选择器嵌套、伪类嵌套  &、属性嵌套

插值   #{}

插套   @content

if/else   for   each   while

map-get/map-merge/map-keys/map-value

@import   @use   @at-root

\

stylus

stylus可以省略字符 {} ：

变量   color = red;   background:color;

box(line...){}   div{box(1)}   arguments

和less的extend一样

嵌套   选择器嵌套、伪类嵌套 &

插值   {}

for  in

@import   @media   @keyframes