这几年，随着 Html5 和 CSS3 的兴起，随之而来多了一个叫做 less 的东西，开始我也不是很明白这是啥，听群里的大神门说着玩意儿可以在 CSS 里边写函数和变量，一直很奇怪是什么鬼，以为貌似CSS3里边也可以写一些函数。趁着放假，刚好拿来研究研究，发现确实还是不错的，今天就以博客的形式跟大家分享分享这几天的研究成果。

首先就是我们看到的 css 的自己标签定义方式，比如

<div class="one">
    <div class="two"><span></span></div>
</div>

在原来的css中我要给span下面的元素添加样式，需要写成下面的格式

.one .two span{...}

有了我们的 Less，我们可以这样写

.one{
    .... // 样式
    .two{
    ... // 样式
        span{
        ... // 样式
        }
    }
}

好了，看到这里，兄弟们有没有感觉到他很酷。
其实远远不止这些，当然在写这个之前我们要先添加样式

// 1. 下载LESSCSS的.js文件，例如lesscss-1.4.0.min.js。
// 2. 在页面中引入.less文件
<link rel="stylesheet/less" href="example.less" />
// 需要注意rel属性的值是stylesheet/less，而不是stylesheet。
// 3. 引入第1步下载的.js文件
<script src="lesscss-1.4.0.min.js"></script>

下面是他的变量书写格式

@color：#ff0000;// 定义一个颜色变量
// 引用的时候直接引用变量名就好了
.one{
color:@color;
}

这个就是我们在less里常见的变量写法，你还可以对变量进行计算，比如：

@i=1;
.one{
z-index:@i+2;
}

当然，如果你觉你在编写样式的时候，有很多样式是一样的那么，你可以写成函数的形式，这个我们把它称为混合，它可以将一个定义好的class A轻松的引入到另一个class B中，从而简单实现class B继承class A中的所有属性。我们还可以带参数地调用，就像使用函数一样。

.rounded-corners (@radius: 5px) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
-ms-border-radius: @radius;
-o-border-radius: @radius;
border-radius: @radius;
}

#header {
.rounded-corners;
}
#footer {
.rounded-corners(10px);
}