less语法

less是一种动态样式语言，属于css预处理器的范畴，扩展了CSS语言，增加了变量、Mixin、函数等特性，使CSS易得维护和扩展

变量

①属性值赋给变量

语法 @变量名:值；

   @COLOR:red;
   title{
     color:@COLOR;//color:red;
   }

②变量用作类名

语法 @属性名:类名；

   @CLASSNAME:table;
   @COLOR:red;
   .@{CLASSNAME}-tr{//.table
     color:@COLOR;
   }
   

③变量用作属性名

语法 @变量名:属性名；

  @BGC:background-color;
  @COLOR:red;
  div{
    @{BGC}:@COLOR;//background-color:red;
  }

Mixin

语法: .规则集名称{…}
将定义的类放在其他的类中，复用性很强

    .well {
      font-size: 14px;
      color: #ccc;
    }
    .good {
      .well;
      padding: 10px;
    }

也可以在规则集中放入选择器
语法:.规则集名称{&:选择器}

   .Login-logo{
     color:red;
     &:hover{
       color:pink;
     }
   }

还可以传递参数 语法:.规则集名称(形参1，形参2)

   @WIDTH:200px;
   @COLOR:red;
   .rigester{
     width:@WIDTH;
     background-color:@COLOR;
   }

嵌套

使用嵌套的手法可以使代码更加简洁

#header{
   color: black; 
   .navigation { 
     font-size: 12px; 
   } 
   .logo { 
     width: 300px;
   } 
   }

ENDING

在写项目时，我们也常常选择用less来写样式哟，所以快快掌握吧!