Less知识点整理（一）

Less知识点整理（一）

1.什么是Less

它不是全新的一门语言，是一款CSS预编译器，仍然使用CSS原有语法进行选择器的编辑，但融入了编程语言的逻辑特征，会生成易于管理、便于维护的CSS代码，也可以理解为是一个CSS框架。

优点：

• CSS代码量会变少
• CSS管理更加方便
• 学习成本低
• 使用数值类型与颜色类型的值更为容易
• 完全兼容CSS3
• 内置函数特征

编译前：

@color:orange;
@mywidth:300px;
.circule(){
   
  border-radius:50%;
}
.middle(){
   
  position: absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
}

.father{
   
   width: @mywidth;
   height: @mywidth;
   background-color: @color;
   .circule;
   position: relative;
   .son{
   
     width: @mywidth * 0.75;
     height: @mywidth * 0.75;
     background-color: lighten(@color,30%);
     .circule;
     .middle;
   }
}

编译后：

.father {
   
  width: 300px;
  height: 300px;
  background-color: orange;
  border-radius: 50%;
  position: relative;
}
.father .son {
   
  width: 225px;
  height: 225px;
  background-color: #ffdb99;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%