less学习与总结

Less是什么
Less是一种动态的样式语言，Less扩展了CSS的动态行为，比如说，设置变量（variables）、混合书写模式（mixins）、操作（operations）和功能（functions）等等，而且Less使用了现有的CSS语法。

疑问：将less转换成CSS需要配置什么？
Less有什么用呢？，直接看下面

变量

注意：在Less中的变量实际上就是一个“常量”，因为它只能被定义一次
Less

@color: #ffffff;
@color: #dddddd;
#header: {
    color: @color;
}

Css

#header {
      color:#dddddd;
 }

上面的代码中很明显的说明了后面的@color覆盖了前面的@color
另外，变量还有计算的功能

混入（Mixins）
混入就是一种嵌套，它允许你将一个类嵌入到另一个类中，而被嵌入的这个类也被称为一个变量。

个人理解：就是你自己行一个类（就当做一个变量吧或者有时候可以认为它是一个带有参数的functions），然后将这个类嵌入到另一个类中当做它的属性

Less

  .common(@radius:5px) {
    border-radius: @radius;
  }

  #header {
    .common;
  }

  #footer {
    .common;
  }

解析成CSS

  #header {
    border-radius: 5px;
  }

  #footer {
    border-radius: 5px;
  }

混入函数还有一个名词叫做“混入参数”，就是说可以接受变量参数

  .common(@radius) {
    border-radius: @radius;
  }

  #header {
    .common(10px);
  }

  #footer {
    .common(20px);
  }

解析成Css

  #header {
    border-radius: 10px;
  }

  #footer {
    border-radius: 20px;
  }

当然也可以不用带参数

嵌套规则
这里需要注意的是，&符号，在Less中嵌套有&解析的是同一个元素或者这个元素的伪类，没有&解析的是后代元素
Less

  .content {
    .footer {
      color: red;
    }
    &.header {
      color: #ffffff;
    }
  }

解析成CSS

  .content .footer{
    color: red;
  }

  .content.header {
    color: #ffffff;
  }

Function&Operations
注意：Less中的operations主要是针对任何数字、颜色、变量的操作，可以对其加减乘除或者更加复杂的运算。而function主要Color functions

命名空间
上面所说，我们把一些变量或者mixins组织起来，并将它封装，想用的时候把一部分取出来使用。

  #bundle {
    .button () {
      display: block;
      border: 1px solid black;
      background-color: grey;
      &:hover { background-color: white }
    }
    .tab { ... }
    .citation { ... }
  }

使用

  #header a {
    color: orange;
    #bundle > .button;
  }

变量范围——scope
采用就近原则，也就是说元素先找本省有没有这个变量存在，如果存在，就取得这个变量，不存在则寻找父元素，以此类推

  @var: red;

  #page {
    @var: white;
    #header {
      color: @var; // white
    }
  }

  #footer {
    color: @var; // red  
  }

总结：上面只是常用的一些功能，less的功能远不仅仅是这些！