@import 别人的 less mixin 可以节约大量的时间，：）

bootstrap less mixin 有大家风范，值得学习

2013-11-26 19:44:56+ 类似的还有 LESS Hat LESS Elements。 bootstrap less mixin 和 LESS Hat 更好一些。细节可以看这篇文章 Battle of the LESS Mixin Libraries: LESS Elements vs. LESS Hat vs. Bootstrap

clearfix

目前最好的 self clear float 办法

.clearfix() {
  &:before,
  &:after {
    content: " "; /* 1 */
    display: table; /* 2 */
  }
  &:after {
    clear: both;
  }
}    

Center-align a block level element 块元素居中

.center-block() {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

Sizing shortcuts

.size(@width; @height) {
  width: @width;
  height: @height;
}
.square(@size) {
  .size(@size; @size);
}

文字溢出…

// Requires inline-block or block for proper styling
.text-overflow() {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

隐藏文字

.text-hide() {
  font: ~"0/0" a;
  color: transparent;
  text-shadow: none;
  background-color: transparent;
  border: 0;
}

单边的圆角

.border-top-radius(@radius) {
  border-top-right-radius: @radius;
   border-top-left-radius: @radius;
}
.border-right-radius(@radius) {
  border-bottom-right-radius: @radius;
     border-top-right-radius: @radius;
}
.border-bottom-radius(@radius) {
  border-bottom-right-radius: @radius;
   border-bottom-left-radius: @radius;
}
.border-left-radius(@radius) {
  border-bottom-left-radius: @radius;
     border-top-left-radius: @radius;
}

阴影

.box-shadow(@shadow) {
  -webkit-box-shadow: @shadow; // iOS <4.3 &="" android="" <4.1="" box-shadow:="" @shadow;="" }="" <="" pre="">

厂商前缀
有些 -webkit- 并不是给 chrome 看的，有可能是“落后”的 safari 或者 android 浏览器。但我感觉手机上还是少用 阴影、3d、animation 等效果 —— “卡”！
// Transitions
.transition(@transition) {
  -webkit-transition: @transition;
          transition: @transition;
}
.transition-property(@transition-property) {
  -webkit-transition-property: @transition-property;
          transition-property: @transition-property;
}
.transition-delay(@transition-delay) {
  -webkit-transition-delay: @transition-delay;
          transition-delay: @transition-delay;
}
.transition-duration(@transition-duration) {
  -webkit-transition-duration: @transition-duration;
          transition-duration: @transition-duration;
}
.transition-transform(@transition) {
  -webkit-transition: -webkit-transform @transition;
     -moz-transition: -moz-transform @transition;
       -o-transition: -o-transform @transition;
          transition: transform @transition;
}

// Transformations
.rotate(@degrees) {
  -webkit-transform: rotate(@degrees);
      -ms-transform: rotate(@degrees); // IE9+
          transform: rotate(@degrees);
}
.scale(@ratio) {
  -webkit-transform: scale(@ratio);
      -ms-transform: scale(@ratio); // IE9+
          transform: scale(@ratio);
}
.translate(@x; @y) {
  -webkit-transform: translate(@x, @y);
      -ms-transform: translate(@x, @y); // IE9+
          transform: translate(@x, @y);
}
.skew(@x; @y) {
  -webkit-transform: skew(@x, @y);
      -ms-transform: skewX(@x) skewY(@y); // See https://github.com/twbs/bootstrap/issues/4885; IE9+
          transform: skew(@x, @y);
}
.translate3d(@x; @y; @z) {
  -webkit-transform: translate3d(@x, @y, @z);
          transform: translate3d(@x, @y, @z);
}

.rotateX(@degrees) {
  -webkit-transform: rotateX(@degrees);
      -ms-transform: rotateX(@degrees); // IE9+
          transform: rotateX(@degrees);
}
.rotateY(@degrees) {
  -webkit-transform: rotateY(@degrees);
      -ms-transform: rotateY(@degrees); // IE9+
          transform: rotateY(@degrees);
}
.perspective(@perspective) {
  -webkit-perspective: @perspective;
     -moz-perspective: @perspective;
          perspective: @perspective;
}
.perspective-origin(@perspective) {
  -webkit-perspective-origin: @perspective;
     -moz-perspective-origin: @perspective;
          perspective-origin: @perspective;
}
.transform-origin(@origin) {
  -webkit-transform-origin: @origin;
     -moz-transform-origin: @origin;
          transform-origin: @origin;
}

// Animations
.animation(@animation) {
  -webkit-animation: @animation;
          animation: @animation;
}


防止 css 3d transforms 时的闪烁（bug）
// Backface visibility
// Prevent browsers from flickering when using CSS 3D transforms.
// Default value is "visible", but can be changed to "hidden"
.backface-visibility(@visibility){
  -webkit-backface-visibility: @visibility;
     -moz-backface-visibility: @visibility;
          backface-visibility: @visibility;
}


选择 user-select
none 表示禁止用户选择（很多操作，如点击、拖拽等 会导致双击选择文字！蓝汪汪一片。。。）

all 全部（默认）
none 不能选
text 只能选文字
elemement 

// For selecting text on the page
.user-select(@select) {
  -webkit-user-select: @select;
     -moz-user-select: @select;
      -ms-user-select: @select; // IE10+
       -o-user-select: @select;
          user-select: @select;
}


其实还有一个
-webkit-touch-callout: none;


css resize
.resizable(@direction) {
  resize: @direction; // Options: horizontal, vertical, both
  overflow: auto; // Safari fix
}


css columns
列数、缝隙宽度
.content-columns(@column-count; @column-gap: @grid-gutter-width) {
  -webkit-column-count: @column-count;
     -moz-column-count: @column-count;
          column-count: @column-count;
  -webkit-column-gap: @column-gap;
     -moz-column-gap: @column-gap;
          column-gap: @column-gap;
}


hyphens 连字符
英文单词换行时候的尴尬，中文没这个问题。

none 不用连字符，单词直接到下一行开始
manual 在单词中间加入  &shy; 建议给浏览器的断词位置！
auto 自动断词

用 firefox 看看这个 css hyphens 例子
.hyphens(@mode: auto) {
  word-wrap: break-word;
  -webkit-hyphens: @mode;
     -moz-hyphens: @mode;
      -ms-hyphens: @mode; // IE10+
       -o-hyphens: @mode;
          hyphens: @mode;
}


透明
其实就是折腾 ie67 8 
.opacity(@opacity) {
  opacity: @opacity;
  // IE8 filter
  @opacity-ie: (@opacity * 100);
  filter: ~"alpha(opacity=@{opacity-ie})";
}


Retina images
根据屏幕（主要是苹果设备的精细屏）选择（两）倍尺寸的大图片。因为这时 px 没意义。而位图放大会变虚。我记得，似乎只有 opera 缩放图片用的是 双立方。其它都是 nearest neibour,line… 之类
.img-retina(@file-1x; @file-2x; @width-1x; @height-1x) {
  background-image: url("@{file-1x}");

  @media
  only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (   min--moz-device-pixel-ratio: 2),
  only screen and (     -o-min-device-pixel-ratio: 2/1),
  only screen and (        min-device-pixel-ratio: 2),
  only screen and (                min-resolution: 192dpi),
  only screen and (                min-resolution: 2dppx) {
    background-image: url("@{file-2x}");
    background-size: @width-1x @height-1x;
  }
}



图片自适应大小
/ Keep images from scaling beyond the width of their parents.

.img-responsive(@display: block;) {
  display: @display;
  max-width: 100%; // Part 1: Set a maximum relative to the parent
  height: auto; // Part 2: Scale the height according to the width, otherwise you get stretching
}


水平线
// Dividers (basically an hr) within dropdowns and nav lists
.nav-divider(@color: #e5e5e5) {
  height: 1px;
  margin: ((@line-height-computed / 2) - 1) 0;
  overflow: hidden;
  background-color: @color;
}


在 bootstrap variables.less 中
@font-size-base:14px;
@line-height-base:        1.428571429; // 20/14

@line-height-computed:    floor(@font-size-base * @line-height-base); // ~20px
 

未完…