Useful LESS mixins

common.less

//MIXINS
.borderRadius (@radius: 5px) {
  -webkit-border-radius: @radius;
     -moz-border-radius: @radius;
          border-radius: @radius;
}

.gradientImage (@fallback, @stop1, @stop2) {
  background-color: @fallback;
  background-image: -webkit-linear-gradient(top, @stop1, @stop2);
  background-image:    -moz-linear-gradient(top, @stop1, @stop2);
  background-image:     -ms-linear-gradient(top, @stop1, @stop2);
  background-image:      -o-linear-gradient(top, @stop1, @stop2);
  background-image:         linear-gradient(top, @stop1, @stop2);
}

.gradientImageHorizontal (@fallback, @stop1, @stop2) {
  background-color: @fallback;
  background-image: -webkit-linear-gradient(left, @stop1, @stop2);
  background-image:    -moz-linear-gradient(left, @stop1, @stop2);
  background-image:     -ms-linear-gradient(left, @stop1, @stop2);
  background-image:      -o-linear-gradient(left, @stop1, @stop2);
  background-image:         linear-gradient(left, @stop1, @stop2);
}

.gradientImageReflected (@fallback, @stop1, @stop2, @stop3, @stop4) {
  background-color: @fallback;
  background-image: -webkit-linear-gradient(top, @stop1 0%, @stop2 50%, @stop3 50%, @stop4 100%);
  background-image:    -moz-linear-gradient(top, @stop1 0%, @stop2 50%, @stop3 50%, @stop4 100%);
  background-image:     -ms-linear-gradient(top, @stop1 0%, @stop2 50%, @stop3 50%, @stop4 100%);
  background-image:      -o-linear-gradient(top, @stop1 0%, @stop2 50%, @stop3 50%, @stop4 100%);
  background-image:         linear-gradient(top, @stop1 0%, @stop2 50%, @stop3 50%, @stop4 100%);
}

.boxShadow (@shadow: 3px 3px 3px rgba(0,0,0,.2)) {
  -webkit-box-shadow: @shadow;
     -moz-box-shadow: @shadow;
       -o-box-shadow: @shadow;
          box-shadow: @shadow;
}

.boxShadow2 (@shadow1, @shadow2) {
  -webkit-box-shadow: @shadow1, @shadow2;
     -moz-box-shadow: @shadow1, @shadow2;
       -o-box-shadow: @shadow1, @shadow2;
          box-shadow: @shadow1, @shadow2;
}

.transition (@options) {
  -webkit-transition: @options;
     -moz-transition: @options;
       -o-transition: @options;
          transition: @options;
}

.rotate (@deg) {
  -webkit-transform: rotate(@deg);
     -moz-transform: rotate(@deg);
      -ms-transform: rotate(@deg);
       -o-transform: rotate(@deg);
          transform: rotate(@deg);
}

.textShadow (@shadow) {
  text-shadow: @shadow;
}

.boxSizing (@sizing: border-box) {
  -webkit-box-sizing: @sizing;
     -moz-box-sizing: @sizing;
          box-sizing: @sizing;
}