【LESS系列】一些常用的Mixins

在我们平时的开发中，对于一些使用频率很高的方法函数，我们一般都会将其归纳到一起，整理出一个核心库来。

其实这个思想，借助 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, @width: 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;
}

 

转载于:https://www.cnblogs.com/czf-zone/p/4366076.html