LESS的简单介绍

　　对于一些布局和样式比较复杂的网页，如何构建一个健康、优雅的CSS文件是一个很令人苦恼的问题。在书写静态页面的时候，我总是遇到布局结构累赘和重复样式复用性不高的问题，当然，对于这些问题归根究底还是要多联系和思考，和使用LESS带来好处并没有什么关系，但是使用LESS书写CSS样式能够清楚的看到样式的布置结构，方面观察各个元素之间的联系。

　　由于CSS是一门领域专用语言，并且是一门非程序式语言，这就造成了CSS代码书写很容易，但是想要写好、方便维护和管理就需要较强的能力了。除开注释有着不可忽视的作用，一个CSS管理工具也可以带来很大的便利。LESS在最大的好处是在 CSS 的语法基础之上，引入了变量，Mixin（混入），运算以及函数等功能，大大简化了 CSS 的编写，并且降低了 CSS 的维护成本，就像它的名称所说的那样，LESS 可以让我们用更少的代码做更多的事情。

　　LESS满足CSS的所有语法，并且在其之上，有着一套自定义语法，用户可以通过自定义语法定义自己的样式规则，并且通过解析器编译成对应的CSS文件。LESS语法包括以下几部分：

　　1、注释

　　在LESS中，注释有两种书写方式，和JS相似

//这是单行注释，只会在LESS中显示，不会被编译在CSS中


/*
 * 这是多行注释，会被编译成CSS的一部分
 */

 

　　2、变量

　　LESS通过@来定义和引入变量，同时变量也存在作用域，在引用时会依照作用域链寻找定义变量的样式使用

@width: 20 px;
.homeDiv {
    @width: 30 px;
    .centerDiv {
        width: @width; // 此处应该取最近定义的变量 width 的值 30px
    } 
} 
.leftDiv { 
    width : @width; // 此处应该取最上面定义的变量 width 的值 20px 
}

 

　　3、混入

　　混入就是相当于将一个类选择器当做变量来引用，实现样式的多重继承。混入有很多种使用方式，这里只列举简单的两种

.bgc{ 
    background-color: black;    //声明一个样式 
} 
.box{ 
    width:100px; 
    height: 100px; 
    .bgc;    //将样式加入到元素中 
}

　　这是最简单的引用方式，引用类选择器的时候还能附加上变量

.boxwidth(@width){ 　　//可以使用@width: 100px 设定默认值，那么使用的时候不传递参数也可以
    width: @width;
} 
.box{ 
    height: 100px; 
    .boxwidth(100px)；
}

 

　　4、嵌套

　　嵌套是针对html结构进行对应的样式设置的方式，并且能够使我们书写代码更加简单快捷

<div class="page">
        <div class="wrapper">
            <div class="content">
                <p>hello</p>
                <p>don't say hello</p>
            </div>
        </div>
    </div>

　　样式是这样书写的:

.page{
    @width: 500px;
    height: 500px;
    border: 1px solid blue;
    overflow: hidden;
    .wrapper{
        width: @width;
        height: 200px;
        margin: 20px auto;
        background: green;
        .contetn{
            width: 200px;
            float: right;
            p{
                font-size: 24px;
            }
            p:last-of-type{
                font-style: initial;
            }   
        }
    }
}

　　经过Koala编译之后：

.page {
  height: 500px;
  border: 1px solid blue;
  overflow: hidden;
}
.page .wrapper {
  width: 500px;
  height: 200px;
  margin: 20px auto;
  background: green;
}
.page .wrapper .contetn {
  width: 200px;
  float: right;
}
.page .wrapper .contetn p {
  font-size: 24px;
}
.page .wrapper .contetn p:last-of-type {
  font-style: initial;
}

　　5、函数和运算

　　LESS支持运算，某些时候能够帮助我们自动完成布局

@width: 250px; 
@color: #255; 
.switchColor { 
    width: @width * 2; 
    background: @color - 100; 
} 

　　支持加减乘除四则运算。