azhsetiawan
8/21/2015 - 10:27 AM

less mixins example for sribu developer's blog (2)

less mixins example for sribu developer's blog (2)

// ...

// for create circle shape layout component
.circle-with-border(@size; @border-width: 1px; @border-color: #000; @radius: 50%) {
  .square(@size);
  -webkit-border-radius: @radius;
     -moz-border-radius: @radius;
          border-radius: @radius;
  border: @border-width solid @border-color;
}
@import 'simple-mixins.less';

.baz-class {
  .circle-with-border(100px);
}

.other-baz-class {
  .circle-with-border(100px; 2px; #111);
}
/* output - using default value and custom value */
.baz-class {
  width: 100px;
  height: 100px;
  -webkit-border-radius: 50%;
     -moz-border-radius: 50%;
          border-radius: 50%;
  border: 1px solid #000;
}

.other-baz-class {
  width: 100px;
  height: 100px;
  -webkit-border-radius: 50%;
     -moz-border-radius: 50%;
          border-radius: 50%;
  border: 2px solid #111;
}