3

Is there any way to utilize a master.less file to house all of the necessary config parameters for .less?

I've got the following variables that I currently have to put at the top of each .less file in my solution.

/* DOTLESS VARIABLES AND REUSABLE FUNCTIONS */
@brand_color: #9fdf40;                               /* Primary MySite Green */
@Color: #696969;                                     /* Alternate Text Color */
@top_gradient: #80cc15;                              /* MySite Green for TOP of GRADIENT */
@bottom_gradient: #9fdf40;                           /* MySite Green for BOTTOM of GRADIENT */
@borders: #696969;                                   /* Standard Gray Border */
@light_borders: #DDD;                                /* Lighter Gray Border */
@note: #ffffbe;                                      /* Yellow Notification Color (Also used for ad highlights) */
@font_family: Verdana, Arial, Helvetica, sans-serif; /*Standard MySite Font Family*/

.two-corner-radius(@radius){
    -webkit-border-top-left-radius: @radius;     /* Saf4+, Chrome */
    -moz-border-radius-topleft: @radius;         /* FF3.6+ */
    border-top-left-radius: @radius;             /* CSS3 */
    -webkit-border-bottom-right-radius: @radius; /* Saf4+, Chrome */
    -moz-border-radius-bottomright: @radius;     /* FF3.6+ */
    border-bottom-right-radius: @radius;         /* CSS3 */
}

.gradient(@from:@top_gradient, @to:@bottom_gradient, @fallback:@brand_color) {
    @ffgradient: "-moz-linear-gradient(center bottom, {0} 37%, {1} 72%)";
    @wkgradient: "-webkit-gradient(linear,left top,left bottom,color-stop(0.37, {0}), color-stop(0.72, {1}))";
    @iegradient: "progid:DXImageTransform.Microsoft.gradient(startColorstr='{1}', endColorstr='{0}')";
    @ie8gradient: "\"progid:DXImageTransform.Microsoft.gradient(startColorstr='{1}', endColorstr='{0}')\"";

    background : @fallback;                             /* for non-css3 browsers */
    background : formatstring(@ffgradient, @from, @to); /* FF3.6+ */
    background: formatstring(@wkgradient, @from, @to);  /* Saf4+, Chrome */
    filter: formatstring(@iegradient, @from, @to);      /* IE6,IE7 */
    -ms-filter: formatstring(@ie8gradient, @from, @to); /* IE8 */
}
/* END REUSABLE FUNCTIONS*/

Now obviously this is easier to maintain over having to edit each instance of each variable within the css (as one traditionally would), however it would be much more beneficial if I could declare a master.less file to hold the variables and functions, and then have it rain down sweet CSS goodness to all of my "sub" .less files.

I'm currently using Chirpy to manage my .less files, which in turn uses a dotless.core.dll

madth3
  • 7,275
  • 12
  • 50
  • 74
Chase Florell
  • 46,378
  • 57
  • 186
  • 376

1 Answers1

8

Turns out there's an @import declaration that allows me to import my master.less file. All I have to do is put this at the top of each .less file and use all of the functions/variables contained within it.

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

Works like a champ.

Chase Florell
  • 46,378
  • 57
  • 186
  • 376