Code LESS vs Code CSS

/*** Code LESS (en plus, quand on lit ça, ça veut tout dire "codez moins" :D) [564 caractères] ***/
.degrade (@origin, @middle, @end) {
    background: -moz-linear-gradient(
        top,
        @origin 0%,
        @middle 25%,
        @end);
    background: -webkit-gradient(
        linear, left top, left bottom,
        from(@origin),
        color-stop(0.25, @middle),
        to(@end));
}

.coinRond(@radius) {
    -moz-border-radius: @radius;
    -webkit-border-radius: @radius;
    border-radius: @radius;
}

.bouton1 {
    .degrade(#fff, #555, #000);
    .coinRond(10px);
}

.bouton2 {
    .degrade(#123, #456, #789);
    .coinRond(6px);
}

.bouton3 {
    .degrade(#192, #384, #576);
    .coinRond(8px);
}

/*** Code CSS (taille du Code : 790 caractères) ***/
bouton1{background:-moz-linear-gradient(top, #ffffff 0%, #555555 25%, #000000);background:-webkit-gradient(linear, left top, left bottom, from(#ffffff), color-stop(0.25, #555555), to(#000000));-moz-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;}
.bouton2{background:-moz-linear-gradient(top, #112233 0%, #445566 25%, #778899);background:-webkit-gradient(linear, left top, left bottom, from(#112233), color-stop(0.25, #445566), to(#778899));-moz-border-radius:6px;-webkit-border-radius:6px;border-radius:6px;}
.bouton3{background:-moz-linear-gradient(top, #119922 0%, #338844 25%, #557766);background:-webkit-gradient(linear, left top, left bottom, from(#119922), color-stop(0.25, #338844), to(#557766));-moz-border-radius:8px;-webkit-border-radius:8px;border-radius:8px;}

/*** Même minifié, le CSS est beaucoup plus gros que le code LESS non minifié. Je crois que ça donne une bonne raison d'aimer ce langage! :D ***/