less的基础使用

一句话介绍

less相当于css的扩充，在css原有的基础上，增加变量、Mixin、函数等特性，便于维护和扩展。

• 声明变量

  @color: #4D926F;
    #header {
        color: @color;
        }
    h2 {
        color: @color;
        }
  

  在后期大范围的修改配色时，我们只需要修改变量@color的值就行

• 带参

  .cen(@color:#fff){
      background-color:@color;
      border:1px solod #f00;
  }
  .cen2{
      .cen(#434443);
  }
  

  跟函数传参一样，定义好变量和变量的值，在后面引用的时候直接传入新的值

• 嵌套

  header{
      color:#f00;
      h2{
          font-size:20px;
          .toppadding{
              padding-top:20px;
          }
      }
      p{
          font-color:#ff0;
      }
  }
  

  嵌套规则和你页面的标签嵌套有关系，从内到位依次书写就行；同级关系的类名标签并行书写；

• 运算

  提供加、减、乘、除四中基本运算，可计算颜色、属性值。

  @border: 1px;
  @base-color: #111;
  @red: #842210;
  header {
    color: @base-color * 3;
    border-left: @border;
    border-right: @border * 2;
  }
  footer { 
    color: @base-color + #003300;
    border-color: desaturate(@red, 10%);
  }
  

使用方法

• 直接使用：在服务器环境下，通过link引入less，再引入less.js (注意先后顺序)
• node：通过npm安装，再调用，详情 请看
• 命令行： 在终端调用 LESS 解析器，详情 请看