像@navBarHeight这样的Less变量可以被主题化吗？

主题化的艺术在更少

开发应用程序时，频繁的视觉修改是不可避免的，因为我们努力争取客户验证。保留某些页面美观（主题）以快速向客户展示是可取的。

一种方法涉及创建应用于主体元素的外观类，从而允许快速页面转换。这就引出了一个问题：像@navBarHeight这样的Less变量可以主题化吗？

用Less定制主题

这的可行性取决于样式和变量变化的程度主题之间。一个简单的起点：

@themes: (
    blue   rgb( 41, 128, 185),
    marine rgb( 22, 160, 133),
    green  rgb( 39, 174,  96),
    orange rgb(211,  84,   0),
    red    rgb(192,  57,  43),
    purple rgb(142,  68, 173)
);

#navBar {
    .themed(background-color);
}

.themed(@property) {
    .for(@themes); .-each(@theme) {
        @name:  extract(@theme, 1);
        @color: extract(@theme, 2);

        .theme-@{name} & {
            @{property}: @color;
        }
    }
}

超越基础：增强自定义

采用模式匹配和规则集参数等技术可以自动生成复杂的主题层次结构。考虑这个例子：

#navBar {
    .themed({
        color:            @fore-color;
        background-color: @back-color;
    });
}

.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();
}

这允许根据特定设计要求定制高度适应性的主题系统。使用 Less，灵活主题化的可能性是无限的。

以上是像@navBarHeight这样的Less变量可以被主题化吗？的详细内容。更多信息请关注PHP中文网其他相关文章！