Fluid faux columns mixin for Less

gistfile1.sass

// Based on Bootstrap gradient mixin
// http://getbootstrap.com/css/#less

// Faux columns technique by Dan Cederholm
// http://alistapart.com/article/fauxcolumns

// Fluid Width Equal Height Columns by Chris Coyier
// http://css-tricks.com/fluid-width-equal-height-columns/

.two-faux-colums(@col-one-color: #efefef; @col-one-width: 25%; @col-two-color: #fff; @border-color: #ebebeb; @border-width: 1px) {
  background-image: -webkit-linear-gradient(right, @border-color, @border-color),
                    -webkit-linear-gradient(right, @col-one-color, @col-one-color @col-one-width, @col-two-color @col-one-width, @col-two-color);
  background-image: linear-gradient(to right, @border-color, @border-color),
                    linear-gradient(to right, @col-one-color, @col-one-color @col-one-width, @col-two-color @col-one-width, @col-two-color);
  background-size: @border-width 100%, auto;
  background-position: @col-one-width 0, -@border-width 0;
  background-repeat: no-repeat;
  background-origin: border-box;
}