用于变量和函数的 DotLess (.less) master.less 文件

发布于 2024-10-30 06:19:21 字数 2404 浏览 3 评论 0原文

有没有办法利用 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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

百变从容 2024-11-06 06:19:21

结果是有一个 @import 声明允许我导入我的 master.less 文件。我所要做的就是将其放在每个 .less 文件的顶部,并使用其中包含的所有函数/变量。

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

像冠军一样工作。

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.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文