Less

了解如何使用 Less 修改 UIkit 樣式並建立您自己的主題。

當您使用 Less 來源安裝 UIkit 時，您可以編譯它並加入您自己的自訂主題。Less是 UIkit 樣式所使用的語言。這可讓您將自訂項目包含在建置過程中，而不是手動覆寫大量 CSS 規則。

如何建置

Less 原始檔案可讓您自訂 UIkit。若要在您的網站上使用自訂版本，您需要將 Less 來源編譯成 CSS。基本上有兩種方法可供您使用：設定您自己的建置程序或使用 UIkit 中包含的建置指令碼。

使用您自己的建置程序

若要將 UIkit 包含在您專案的建置工作流程中，您需要將核心 UIkit 樣式 (uikit.less) 或具有預設主題的 UIkit (uikit.theme.less) 匯入您專案的 Less 檔案中。然後，這個主要的 Less 檔案需要以您喜歡的任何方式進行編譯。如果您不確定如何編譯 Less，請閱讀官方 Less 文件。

// Import UIkit default theme (or uikit.less with only core styles)
@import "node_modules/uikit/src/less/uikit.theme.less";

// Your custom code goes here, e.g. mixins, variables.
// See "how to create a theme" below for more info.

使用內含的建置程序

如果您想要變更 UIkit 的樣式，您可以使用其建置程序來建立不同主題的 CSS 版本，然後您可以將其包含在您的專案中。這樣您就不需要設定自己的建置程序。

若要在建置程序中包含您自己的 Less 主題，請建立一個 /custom 目錄，其中將包含您的所有自訂主題。

注意/custom 資料夾列在 .gitignore 中，這可防止您的自訂檔案被推送到 UIkit 存放庫中。您也可以將 /custom 目錄作為您自己的 Git 存放庫。這樣，您的主題檔案就會受到版本控制，而不會干擾 UIkit 檔案。

建立一個檔案 /custom/my-theme.less (或任何其他名稱)，並匯入核心 UIkit 樣式 (uikit.less) 或具有預設主題的 UIkit (uikit.theme.less)。

// Import UIkit default theme (or uikit.less with only core styles)
@import "../src/less/uikit.theme.less";

// Your custom code goes here, e.g. mixins, variables.
// See "how to create a theme" below for more info.

若要將 UIkit 和您的自訂主題編譯成 CSS，請執行 pnpm 工作 compile。

# Run once to install all dependencies
pnpm install

# Compile all source files including your theme
pnpm compile

# Watch files and compile automatically every time a file changes
pnpm watch

產生的 CSS 檔案將位於 /dist/css 資料夾中。

注意自訂主題也可在測試檔案中使用，只需將您的瀏覽器導覽至 /tests 目錄的索引，並從下拉式選單中選取您的主題即可。

建立 UIkit 主題

當您設定好要放入自己 Less 程式碼的檔案時，您可以開始以您想要的方式為 UIkit 設定主題。如果您以前從未使用過 Less，請查看語言功能。在使用 UIkit Less 來源時，我們有一些建議。

使用變數

只需覆寫已宣告的變數值，即可進行許多自訂。您可以在框架的 Less 檔案中找到每個元件的所有變數，並在您的主題中覆寫它們。

首先，在 UIkit 來源中找到您想要變更的 Less 變數。例如，全域連結色彩在 /src/less/components/variables.less 中定義

// default value
@global-link-color: #4091D2;

然後，在您自己的檔案中，即在 /custom/my-theme.less 中設定自訂值來覆寫預設值

// new value
@global-link-color: #DA7D02;

然後，編譯後的 CSS 將具有您的自訂值。但不僅全域連結色彩發生了變更。許多元件會使用 @global-* 變數來推斷它們自己的色彩，並稍微調整它們。這樣，您只需變更一些全域變數即可快速建立主題。

使用掛鉤

為了防止額外的選擇器，我們使用Less中的 Mixin，它會掛鉤到 UIkit 來源中預先定義的選擇器，並套用額外的屬性。選擇器不必在所有文件中重複，而且可以更容易地進行全域變更。

首先，透過瀏覽元件的 Less 檔案來尋找您想要擴充的規則，例如 Card 元件的 /src/less/components/card.less

// CSS rule
.uk-card {
    position: relative;
    box-sizing: border-box;

    // mixin to allow adding new declarations
    .hook-card();
}

然後，透過在您自己的 Less 檔案中，即在 /custom/my-theme.less 中使用掛鉤來注入額外的 CSS

// mixin to add new declaration
.hook-card() { color: #000; }

其他掛鉤

如果沒有可用的變數或掛鉤，您也可以建立自己的選擇器。若要這麼做，請使用.hook-card-misc 掛鉤，並在其中寫入您的選擇器。這會將您的新選擇器排序到已編譯 CSS 檔案的正確位置。只需將以下程式碼行加入您自己的 Less 檔案，即 /custom/my-theme.less

// misc mixin
.hook-card-misc() {

    // new rule
    .uk-card a { color: #f00; }
}

停用反轉元件

反轉元件會產生 CSS，以根據背景色彩為所有元件著色。如果您的專案不需要反轉內容色彩，您可以在編譯 Less 時停用它。這會縮小已編譯 CSS 的檔案大小。若要這麼做，請搜尋包含 color-mode 的 Less 變數 (例如 @card-primary-color-mode)，並將它們設定為 none。

若要完全停用反轉樣式，請設定

@inverse-global-color-mode: none;

您也可以針對特定元件停用反轉模式。以下是所有元件的完整清單。

// Card
@card-default-color-mode: none;
@card-primary-color-mode: none;
@card-secondary-color-mode: none;

// Dropbar
@dropbar-color-mode: none;

// Dropdown
@dropdown-color-mode: none;

// Navbar
@navbar-color-mode: none;
@navbar-dropdown-color-mode: none;

// Off-canvas
@offcanvas-bar-color-mode: none;

// Overlay
@overlay-default-color-mode: none;
@overlay-primary-color-mode: none;

// Section
@section-default-color-mode: none;
@section-muted-color-mode: none;
@section-primary-color-mode: none;
@section-secondary-color-mode: none;

// Tile
@tile-default-color-mode: none;
@tile-muted-color-mode: none;
@tile-primary-color-mode: none;
@tile-secondary-color-mode: none;

如何組織您的主題

在上述範例中，我們已將所有自訂規則直接加入 /custom/my-theme.less。當您變更幾個變數但對其餘部分感到滿意時，這完全沒問題。但是，對於較大的自訂項目，我們建議僅使用此檔案作為 Less 編譯器的進入點。您應該將所有規則排序到子資料夾內每個元件的單一檔案中。這與您可以在預設主題 /src/less/uikit.theme.less 中找到的結構相同。

注意範例假設您正在完整 UIkit 專案的 /custom 目錄中建置主題。如果您已設定自己的建置程序，您可以調整這些路徑。

custom/

    <!-- entry file for Less compiler -->
    my-theme.less

    <!-- folder with single Less files -->
    my-theme/

        <!-- imports all components in this folder -->
        _import.less

        <!-- one file per customized component -->
        accordion.less
        alert.less
        …

Less 編譯器的進入點，/custom/my-theme.less

// Core
@import "../../src/less/uikit.less";

// Theme
@import "my-theme/_import.less";

您的主題資料夾有一個檔案，其中匯入所有單一元件自訂項目，custom/my-theme/_import.less

@import "accordion.less";
@import "alert.less";
// …

注意透過此設定，您可以移除您未使用的元件的匯入陳述式。這將產生較小的 CSS。只需確定保留 src/less/components/_import.less 中列出的正確匯入順序即可。