快速开发CSS的利器 - less 参数混入与运算

HTML5学堂：我们在CSS中经常会利用同一个数值进行赋值或计算，在之前我们已经讲解了less的变量以及作用域，也提到了混入~今天我们提两个类似的功能，一个是参数的混入，另一个是运算。

less 参数混入

参数混入实际上是混入的一种，混入指的是在CSS代码当中再书写CSS代码（也就是样式中的样式），对于一些会在样式表中重复使用的样式规则，使用样式的嵌套方式进行书写。而参数混入，则是将一个公用的样式属性值作为一个类的参数，通过控制这个类的参数值，达到控制公用样式中属性值的方法，最为常用的地方在于浏览器兼容问题严重的CSS3样式的书写。

来看一个案例：

1. .border-radius( @radius: 10px ) {
2.     -webkit-border-radius: @radius;
3.     -moz-border-radius: @radius;
4.     border-radius: @radius;
5. }

在这个例子中，.border-radius有个默认的10px的圆角。通过修改括号中@radius的值能够使下面各个属性的属性值同时发生改变。

less 运算

对于less中CSS样式的书写，与原来书写方式有所不同的是，可以使用表达式（也就是可以使用变量与数字的运算进行），例如

1. @width: 10px;
2. @half_width: @width / 2;

上面的代码在less的CSS中可以这样来使用：border: (@half_width / 2) solid #000

欢迎沟通交流~HTML5学堂