实用工具 mixin 用于与不相关的 CSS 结合以达到特定目的或任务。

Clearfix -- 清除浮动

建议为需要清除浮动的元素使用 .clearfix() mixin ，尽量不要直接添加 class="clearfix" 类。

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

// Usage
.container {
  .clearfix();
}

水平居中

让元素在其父元素中水平居中。需要设置 width 或 max-width 属性。

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

// Usage
.container {
  width: 940px;
  .center-block();
}

尺寸助手 mixin

用于方便的指定对象的尺寸。

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

// Usage
.image { .size(400px; 300px); }
.avatar { .square(48px); }

可调整大小的文本域

方便设置任何文本域或其他元素的尺寸可调整。默认依循浏览器默认行为 (both)，即垂直、水平都可以调整。

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

截断文本

此 mixin 用来以省略号代替被截断的文本。元素必须是 block 或 inline-block 级。

// Mixin
.text-overflow() {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

// Usage
.branch-name {
  display: inline-block;
  max-width: 200px;
  .text-overflow();
}