用于变量和函数的 DotLess (.less) master.less 文件
有没有办法利用 master.less 文件来容纳 .less 的所有必要配置参数?
我目前必须将以下变量放在解决方案中每个 .less 文件的顶部。
/* 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*/
现在显然这比必须编辑 css 中每个变量的每个实例(就像传统上那样)更容易维护,但是如果我可以声明一个 master.less
文件来保存变量和函数,然后将甜蜜的 CSS 精华倾注到我所有的“子”.less 文件中。
我目前正在使用 Chirpy 来管理我的 .less 文件,该文件又使用 dotless.core.dll
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
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
结果是有一个
@import
声明允许我导入我的master.less
文件。我所要做的就是将其放在每个 .less 文件的顶部,并使用其中包含的所有函数/变量。像冠军一样工作。
Turns out there's an
@import
declaration that allows me to import mymaster.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.Works like a champ.