CSS预处理器

1 基于CSS的另一种语言
2 通过工具编译成CSS
3 添加了很多CSS不具备的特性
4 能提升CSS文件的组织
5嵌套，反映层级和约束
6 变量和计算 减少重复代码
7 EXtend和Mixin代码片段
8 循环适用于复杂有规律的样式
9 import CSS文件模块化

less嵌套

npm install  less

body {
  padding:0;
  margin:0;
}

.wrapper {
  background:white
  
  .nav {
     font-size:12px;
   }
   .content {
     font-sizing:14px;
     &:hover {
          background:red;
      }
   }
}

sass

npm install sass

body {
padding:0;
margin:0;
}

.wrapper {
   background:white:}
   .wrapper .nav {
      font-size:12px
  }
   .wrapper .content {
        font-size:14px;
  }
      .wrapper  .content:hover {
        background:red;
     }
}

less变量

@fontsize:12px;
@bgColor:red;

body {
   padding:0;
   margin:0;
}

.wrapper {
   background:lighten(@bgColor,40%);
  
  .nav {
    font-size:@fontsize;
  }
  .content {
   
 }
}

sass变量

$fontsize:12px
$bgColor:red;

.wrapper {
   background:lighten($bgColor,40%);
   .nav {
       font-size:$fontSize;
    }
}