Multiple .less files with a single config

Apr 5, 2011 at 8:04 PM

I use many many .less (.css) files when I build my solution. It really helps me maintain my styles and wrap my head around the project.

I've started using Chirpy, and now I add it to every solution. It's a great tool and I absolutely love it.

One thing I've noticed is that I have to COPY/PASTE my reusable .less variables to the top of all of my files, and when I need to make a variable adjustment, I need to go into each file to make the adjustment.

I'm wondering if there is any way to create a MASTER.less file whereby I can add all of my variables and reusable settings, and then have Chirpy utilize them across all of my .less files.

EXAMPLE:

master.less

@brand_color: #9fdf40;
@note: #ffffbe;
@borders: #696969;
@light_borders: #DDD;
@font_family: Verdana, Arial, Helvetica, sans-serif;

.two-corner-radius(@radius){
    -webkit-border-top-left-radius: @radius;
    -moz-border-radius-topleft: @radius;
    border-top-left-radius: @radius;
    -webkit-border-bottom-right-radius: @radius;
    -moz-border-radius-bottomright: @radius;
    border-bottom-right-radius: @radius;
}

Apr 5, 2011 at 11:12 PM
Edited Apr 5, 2011 at 11:13 PM

I also put this question up on StackOverflow

Apr 6, 2011 at 4:36 AM

I found my answer. I just need to "@import" the master.less file at the top of each subsequent .less file.

@import "E:\Projects\MyApp\UI\Assets\Css\master.less";