css - LESS mixins vs classes -

i'm looking less because see of benefits. instance colour declaration.

one thing don't understand tho, , maybe i'm not getting flow right - why use following less snippet

.radius {   -webkit-border-radius:5px;   -moz-border-radius:5px;   border-radius:5px;   } .btn-red{   background-color:red;   .radius;      } .btn-green{   background-color:green;   .radius; } ... 

when can use .radius class in html file right away. i'm left impression less add ton of duplicate code once gets compiled.

i'm using following, makes more sense. same font-size, margins, etc... aren't classes used in such cases?

<div class="btn-red radius">cancel</div> <div class="btn-green radius">go</div> 

the snippet above not benefit sass/less capabilities much. lets have closer , check scss snippet.

// abstract placeholder. %radius {   border-radius: 5px; }  // put global styling here. // i'm assuming can alter markup , have button.btn.btn-green .btn {    // color modifier.   &-red {     @extend %radius;     background-color: red;   }   &-green {     @extend %radius;     background-color: green;   } } 

the css output be:

.btn-red, .btn-green {   border-radius: 5px; }  .btn-red {   background-color: red; } .btn-green {   background-color: green; } 

and have pick autoprefixer , vendor-prefixes issue solved once , all.