在我们平时的开发中,对于一些使用频率很高的方法函数,我们一般都会将其归纳到一起,整理出一个核心库来。
其实这个思想,借助 LESS 也可以在 CSS 中得以实现。
下面是几个在 W3CPLUS 中偷过来的常用 Mixins,将其转成 LESS 版~~~
在开始前,必须说说 LESS 的一个不足之处,那就是不能像 SASS 那样使用 @if 和 @for 作判断和循环。
这使得我们无法通过传参的方式来使 Mixins 根据需要编译出PC端和移动端的样式版本。
不过个人认为,这也不是什么致命的缺陷,它还是基本能满足工作需要的了。
但正因为这个缺陷,下面转化出来的 Mixins 注定不能和 SASS 的相提并论了,我们需要根据需要,整理出PC端和移动端两个版本的 Mixins 库了。
//表单元素垂直居中对齐(也可设置顶对齐,底对齐) .form-element-v-align(@alignment: middle){ display: inline-block; vertical-align: @alignment; *vertical-align: auto; *display: inline; zoom: 1; } //水平居中 .horizontal-center(){ margin-left: auto; margin-right: auto; } //绝对居中(相对于固定宽高的容器) .absolute-center(@width, @height){ position: absolute; left: 50%; top: 50%; margin-left: -(@width / 2); margin-top: -(@height / 2); width: @width; height: @height; } //浮动(主要针对PC端了...) .float(@side: left){ float: @side; _display: inline; } //清除浮动(其实很多时候,clear-fix也被提取为单类使用) .clear-fix(){ *zoom: 1; &:before, &:after { content: ""; display: table; clear: both; overflow: hidden; } } //截取文本(仅针对单行) .text-single-line-ellipsis(@height, @line-height, @ auto){ width: @width; height: @height; line-height: @line-height; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } //设置透明度 .opacity(@val){ filter: alpha(opacity=@val); opacity: @val / 100; } //不可用状态 .disabled(@bgColor:#e6e6e6, @textColor:#ababab){ background-color: @bgColor !important; color: @textColor !important; cursor: not-allowed !important; } //最小高度(主要针对PC端了...) .min-height(@height){ min-height: @height; height: auto !important; _height: @height; }