less 学习总结

less 学习总结

1、支持样式嵌套和计算（单位一致保留单位，不一致取消单位，只保留数值）

2、变量

• 声明变量：@contentWidth: 100px;
• 使用变量:
  • css 属性中使用变量

    .content {
      width: @contentWidth;
    }
    

  • 选择器中使用变量

    @mySelector: banner;
    
    .@{mySelector} {
      width:100px;
    }
    

  • url中使用变量

    @images: "../img";
    body {
      background: url("@{images}/white-sand.png");
    }
    

3、语言扩展

• Mixins 混入样式

  .borderd {
    border-top:2px;
  }
  
  .test {
    color:white;
    .borderd(); // border-top:2px
  }
  

• 不带参数（隐藏混入）

  // 集合将被隐藏,不会暴露到css中
  .wrap(){
    text-wrap:wrap;    
  }
  
  //调用
  pre {
    .wrap
  }
  

• 带参数的混入样式

  .borderRadius(@radius){
    border-radius: @radius;
  }
  
  //调用
  header {
    .borderRadius(4px);  //border-radius: 4px;
  }
  注意: 可以带默认值(@radius: 4px)，可覆盖，可以使用@arguments（包含所有参数的值）