Front-End Architecture: Root LESS files and how to "parameterize" component styles.

1. page.less

/** Root LESS file for the page where component styles are imported.
*/

// Import components LESS file
@import "component"


// Include component style as a mixin which CAN be included outside of a directive block
.component( 'blue'; 10px );

2. component.less

/** Component styling
*/

// Entire component style wrapped within a parametric mixin
.component( @bg-color; @padding ){
    
    // Actual component selector
    .components-selector {
        background-color: @bg-color;
        padding: @padding;
    }
}

3. page.css

/* Result page CSS
*/

.components-selector {
    background-color: blue;
    padding: 10px;
}