Cacher is the code snippet organizer for pro developers

// for create square shape layout component with same width and height
.square(@size) {
  width: @size;
  height: @size;
}

// for create circle shape layout component
.circle(@size; @radius: 50%) {
  .square(@size);
  -webkit-border-radius: @radius;
     -moz-border-radius: @radius;
          border-radius: @radius;
}

@import 'simple-mixins.less';

.foo-class {
  .square(100px);
  background-color: #000;
}

.other-foo-class {
  .circle(100px);
  background-color: #eee;
  border: 1px solid #000;
}

/* output */
.foo-class {
  width: 100px;
  height: 100px;
  background-color: #000;
}

.other-foo-class {
  width: 100px;
  height: 100px;
  -webkit-border-radius: 50%;
     -moz-border-radius: 50%;
          border-radius: 50%;
  background-color: #eee;
  border: 1px solid #000;
}