DotLess (.less) master.less file for variables and functions
Is there any way to utilize a master.less
file to house all of the necessa开发者_JS百科ry 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
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.
精彩评论