less函数

问题描述：
在编写页面时，有以下几种按钮：

这时候我们CSS代码毫无疑问写一个公共类，然后再为每个按钮增加独自的样式如下：

HTML：

<div class="common a">立即抢购</div>
<div class="common b">即将开始</div>
<div class="common c">已结束</div>

CSS:

.common {
width:76px;
height:28px;
color:#fff;
border-radius:4px;
line-height:28px;
text-align:center;
}
.a {
background:#ff6225;
}
.b {
background:#27b2d1;
}
.c {
background:#999999;
}

此时完美解决需求。
再放大点，貌似我们可以将这个common写成公共类lib-btn，供整个项目使用。
然而在写另一个页面时候，又遇到下面的按钮：

与lib-btn相比，我们要修改圆角，修改字体大小，修改字体颜色，还要单独增加背景颜色，这样lib-btn根本没有起作用。
其他页面又有其他各种各样按钮：

等等
这些按钮宽高、背景、颜色、圆角各不相同，lib-btn还有存在的必要么？或者说该怎么修改lib-btn才能满足各个样式的需求呢？
我找到的解决办法就是本文的less函数：
公共类:function-btn代码如下：

.function-btn (@width,@height,@bg,@color,@radius:@height/2) {
width:@width;
height:@height;
color:@color;
background:@bg;
border-radius:@radius;
line-height:@height;
text-align:center;
}

less中这样一个方法和JS函数相似，可以在全局中任意地方调用，调用时传入参数即可。
使用方法：

.example{
.function-btn (77px,28px,#ff6225,#ffffff,4px);
}

效果：

各项参数的数据格式，和css中一样（px、%、em、rem）（rgb()、rgba()、#）正常使用。
实际上经过less编译，上面example在加载时代码如下：

.example{
    width:77px;
    height:28px;
    background:#ff6225;
    color:#ffffff;
    border-radius:4px;
    line-height:14px;
    text-align:center;
}

此时我们第一个页面的代码就可以这么写：
HTML:

<div class="common a">立即抢购</div>
<div class="common b">即将开始</div>
<div class="common c">已结束</div>

CSS：

.common{
    .function-btn(77px,28px,#ff6225,#ffffff,4px);
}
.b{
    background: #27b2d1;
}
.c{
    background: #999999;
}

效果：

任务完成。

其他按钮可以这么写：
HTML:

<div class="common">首页</div>
<div class="common active">机票</div>

CSS：

.common{
    .function-btn(90px,49px,#ffffff,#e60012);
    font-size:14px;
}
.active{
    background:#e60012;
    color:#ffffff;
}

效果：

本例没有为border-radius传参，less会调用默认值。
没有将font-size写入function-btn中是个人感觉，大部分时候字体大小都会来自继承，如果传参，或者设置默认参数，会覆盖原有样式。这样不传入的话，即使字体有特别要求也可以单独进行设置。
这样看来function-btn基本可以作为公共样式写入公共文件中。
需要注意的是：
1.默认参数是否设置，如果大多时候该参数的值都是相同的，将该值设置为默认参数，否则设置的意义也不大。
2.调用函数时，如果不传参，则调用默认参数，如果没有默认参数则编译时会报错（个人感觉忽略该属性会更好）。
3.实际上less编译完，代码量并没有减少，只是这样方便开发，提高开发效率。

接下来就是扩展了：
按钮之所以不用通常的的lib-btn，就是变量太多，设置时候虽然都是这些属性，但是值大多时候都是不相同的，我们用less函数解决，那么其他相似情况（属性相同，值不同），其实都是可以用less函数解决的。
像渐变：

.function-gradient-topToBtm (@top:rgb(255,70,66),@bottom:rgb(234,5,4)){
    background:@top; /* 一些不支持背景渐变的浏览器 */
    background:-moz-linear-gradient(top, @top, @bottom);
    background:-webkit-gradient(linear, 0 0, 0 bottom, from(@top),     to(@bottom));
    background:-o-linear-gradient(top, @top, @bottom);
}

我们可以这么用：

.example{
    .function-btn(88px,36px,#AECAFD,#ffffff);
    .function-gradient-topToBtm(#AECAFD,#5C97FC);
}

效果：

等,其他一些公共类见：shoufuyou-mobile/assets/less/lib/function.less

缺点：
1.对函数不够熟悉的时候，经常需要翻看参数。

巴特西

less函数

最新文章

热门文章