初识Less

Less 学习

之前就有听说过Less这个CSS的预编译器，学习之后，发现Less的确比直接写CSS灵活方便以及简洁。
在Less的学习中，我利用的是Koala这个工具，如果您也对此感兴趣——koala.

我感兴趣的地方

• 变量
  可以在全局区域（也许说法不太准确）利用@来声明变量并赋值。这个其实应该算是常量，因为在全局范围内只能定义一次。
  变量还可以作为参数的身份这样用——

#wrap(@fontSize){
    font-size:@fontSize;
}

• 混合
  这个特性我很喜欢。混合可以将一系列的属性从一个规则的集合中引入到另一个规则的集合。有点类似包含关系。个人认为它在书写一些有关各种浏览器兼容的样式时作用很明显，可以简化很多的工作。比如一些样式需要架上-webkit-,-moz-等等前缀，利用混合可以简化很多工作量。（与参数传递结合起来，简直完美，懒人的福音）

.border(@width:2px){
    border:@width solid red;
}
#wrap{
    .border
}

• 嵌套
  在平常的CSS的书写中，常常会遇到嵌套的HTML的样式定义（应该是一定会遇到吧），平常也是习惯了以下形式：

#wrap{
}
#wrap ul{
}
#wrap p{
}
#wrap ul li{
}
#wrap ul a{
}
#wrap ul a:hover{
}

接触了Less之后，简直打开了新世界的大门，Less告诉你，嵌套还可以这样写——

#wrap{
    ul{
        li{
        }
        a{
            &:hover{
            }
        }
    }
    p{
    }
}

简洁很多是吧？而且层次超级清晰！
关于Less，它还有很多的特性，但是就目前而言，我对上述所写的属性比较感兴趣，而且这些应该也是日常预编译CSS中最常用到的地方。CSS给我的感觉是用设计师的思想来渲染页面，而Less则是从工程的角度出发，以工程化的视角看待样式编写。