在我們平時的開發(fā)中，對于一些使用頻率很高的方法函數(shù)，我們一般都會將其歸納到一起，整理出一個核心庫來。

其實這個思想，借助 LESS 也可以在 CSS 中得以實現(xiàn)。

下面是幾個在 W3CPLUS 中偷過來的常用 Mixins，將其轉(zhuǎn)成 LESS 版~~~

在開始前，必須說說 LESS 的一個不足之處，那就是不能像 SASS 那樣使用 @if 和 @for 作判斷和循環(huán)。

這使得我們無法通過傳參的方式來使Mixins 根據(jù)需要編譯出PC端和移動端的樣式版本。

不過個人認為，這也不是什么致命的缺陷，它還是基本能滿足工作需要的了。

但正因為這個缺陷，下面轉(zhuǎn)化出來的 Mixins 注定不能和 SASS 的相提并論了，我們需要根據(jù)需要，整理出PC端和移動端兩個版本的 Mixins 庫了。

//表單元素垂直居中對齊（也可設(shè)置頂對齊，底對齊）
.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;
}

//設(shè)置透明度
.opacity(@val){
  filter: alpha(opacity=@val);
  opacity: @val / 100;
}

//不可用狀態(tài)
.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;
}

總結(jié)

以上是生活随笔為你收集整理的【LESS系列】一些常用的Mixins的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。