Collection of Useful Mixin

mixins.less

// to be used only when all the corners have the same radius (and unit)
.border-radius(@radius) {
  -webkit-border-radius: @radius;
          border-radius: @radius;
}

// specify radius per corner (and probably units)
.border-radius(@top-left, @top-right, @bottom-right, @bottom-left) {
  border-top-left-radius: @top-left;
  border-top-right-radius: @top-right;
  border-bottom-right-radius: @bottom-right;
  border-bottom-left-radius: @bottom-left;
}

.box-shadow(@arguments) {
  -webkit-box-shadow: @arguments;
          box-shadow: @arguments;
}

// The micro clearfix http://nicolasgallagher.com/micro-clearfix-hack/
.clearfix() {
  *zoom:1;
  &:before,
  &:after { content:""; display:table; }
  &:after { clear:both; }
}

.linear-gradient(@direction, @start, @stop) {
  background: -webkit-linear-gradient(@direction, @start, @stop);
  background:    -moz-linear-gradient(@direction, @start, @stop);
  background:     -ms-linear-gradient(@direction, @start, @stop);
  background:      -o-linear-gradient(@direction, @start, @stop);
  background:         linear-gradient(@direction, @start, @stop);
}

.separator() {
  border: none;
  border-left: @separator-left-color solid 1px;
  border-right: @separator-right-color solid 1px;
  padding: 7px 0;
}

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

.sprite(@col:0, @row:0, @url:@default-sprite-url) {
  @gutter: 10; @size: 44;
  @x: ((@size + @gutter) * @col * -1);
  @y: ((@size + @gutter) * @row * -1);
  background: url(@url) no-repeat;
  background-position: ~"@{x}px @{y}px";
}

.reset() { margin: 0; padding: 0; }