Less编程化CSS学习

前段时间里，抽空学习了Less，一种动态样式语言，感觉真的很强大。

如何在客户端使用：

1.引入你的样式文件，并把rel属性设置为stylesheet/less 。

2.引入你下载的less.js文件，在head中。

注：1.样式文件，一定要在less.js文件之前。2.需要在服务器环境下使用。

使用方式：

1.变量的使用方式。

　　变量允许我们单独定义一系列通用的样式，然后再需要的时候调用。

@the-border:2px solid #ccc; .de{border: @the-border;}

2.函数的方式。

　　我们可以像使用函数一样的传参数给它，并调用它。

.box-shadow(@shadow){ box-shadow: @shadow; } .de{width: 450px; height: 450px; .box-shadow(#936 0 0 10px);}

3.嵌套的方式。

　　我们可以在一个选择器中，嵌套另一个选择器来实现继承。

.de{ p{ color:#936; } }

4.函数与运算的方式。

　　程序设计中的加减乘除。

@the-border:1px; @the-color:#111; .de{color: @the-color * 3;}