像@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中文網其他相關文章！