LESS Extend :: #css

extend.less

/** EXAMPLE 1
---------------------------------------- **/

/* LESS */
.museo,h1,h2,h3 {
    font-family:"Museo",sans-serif;
}
.nav {
    /* some css */
    &:extend(.museo);
}

/* Compiled CSS */
.museo,h1,h2,h3,
.nav {
    font-family:"Museo",sans-serif
}
.nav {
    /* some css */
}


/** EXAMPLE 2
 ** Take note of 'all' this tells LESS to extend
 ** .nav to all the nested styles too.
---------------------------------------- **/

/* LESS */
.clearfix { *zoom:1;
    &:before, &:after {content:""; display:table; }
    &:after { clear:both; }
}
.nav {
    /* some css */
    &:extend(.clearfix all);
}

/* Compiled CSS */
.clearfix,
.nav {
    *zoom: 1;
}
.clearfix:before,
.nav:before,
.clearfix:after,
.nav:after {
    content: "";
    display: table;
}
.clearfix:after,
.nav:after {
    clear: both;
}
.nav {
    /* some css */
}