为了账号安全,请及时绑定邮箱和手机立即绑定

如何在lesscss中主题化

如何在lesscss中主题化

HUX布斯 2020-02-02 15:27:10
由于我正处于开发应用程序的预生产周期中,因此我经常更改视觉效果,以便收敛到将由客户验证的内容。保留同一页面的某些视觉效果(称为主题)会很有趣,这样我就可以快速地向客户展示它们。我发现的方法是创建一个放在外观上的外观类,并通过更改它可以相应地更改页面本身。这就是说,我对主题化全局较小变量感兴趣,例如:// default appearance@navBarHeight: 50px;.appearanceWhite {    @navBarHeight: 130px;}.appearanceBlack {    @navBarHeight: 70px;}这样,稍后在.less中,我提出了以下类:#navBar {    height: @navBarHeight;    // appearance handling    .appearanceBlack & {        background-color: black;    }    .appearanceWhite & {        background-color: white;    }}当然,实际情况如果比较复杂。是否可以根据外观CSS类定义(或重新定义)较少的变量?
查看完整描述

1 回答

?
米琪卡哇伊

TA贡献1998条经验 获得超6个赞

这完全取决于主题之间有多少种样式和变量,例如(非常)基本的凝视点可能是这样的:


@主题:

    蓝色RGB(41,128,185),

    海洋rgb(22,160,133),

    绿色rgb(39,174,96),

    橙色rgb(211,84,0),

    红色RGB(192,57,43),

    紫色RGB(142,68,173);


//用法:


#navBar {

    .themed(background-color);

}


//实现:


@import “为” ;


.themed(@property){

    .for(@themes); .-each(@theme){

        @name:提取(@theme,1);

        @color:提取(@theme,2);


        .theme-@ {name}和{

            @ {属性}:@color;

        }

    }

}

然后使用模式匹配,规则集参数等,您可以自动生成任何复杂的外观/主题层次结构。


例如几乎相同的简单示例,但具有更多可定制的方法:


// usage:


#navBar {

    .themed({

        color:            @fore-color;

        background-color: @back-color;

    });

}


// themes:


.theme(@name: green) {

    @fore-color: green;

    @back-color: spin(@fore-color, 180);

    .apply();

}


.theme(@name: blue) {

    @fore-color: blue;

    @back-color: (#fff - @fore-color);

    .apply();

}


.theme(@name: black-and-white) {

    @fore-color: black;

    @back-color: white;

    .apply();

}


// etc.


// implementation:


.themed(@style) { 

    .theme(); .apply() {

        .theme-@{name} & {

            @style();

        }

    }

}


查看完整回答
反对 回复 2020-02-02
  • 1 回答
  • 0 关注
  • 577 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信