Sass

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

當您使用原始碼安裝 UIkit時，您會在 /src/scss 資料夾中找到 UIkit Sass 版本。Sass 版本允許您在建置過程中包含自訂設定，而不是手動覆蓋大量 CSS 規則。

注意 Sass 允許兩種不同的語法版本：Sass 和 SCSS。UIkit 使用 SCSS 語法。

如何建置

若要在專案的建置工作流程中包含 UIkit，您需要將 UIkit 的三個 SCSS 檔案依照正確的順序匯入到您自己的 SCSS 程式碼中。然後，編譯您的檔案，例如執行 sass site.scss > site.css 或任何其他Sass 編譯器。請務必保持下列範例中描述的正確順序。

// 1. Your custom variables and variable overwrites.
$global-link-color: #DA7D02;

// 2. Import default variables and available mixins.
@import "uikit/src/scss/variables-theme.scss";
@import "uikit/src/scss/mixins-theme.scss";

// 3. Your custom mixin overwrites.
@mixin hook-card() { color: #000; }

// 4. Import UIkit.
@import "uikit/src/scss/uikit-theme.scss";

注意範例使用內含的預設主題樣式。或者，您可以匯入 variables.scss、mixins.scss 和 uikit.scss，僅包含核心樣式。

建立 UIkit 主題

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

使用變數

只需覆寫已宣告變數的值，即可進行大量自訂。您可以在框架或 variables.scss 檔案的每個組件的 SCSS 檔案中找到所有變數，並在您的主題中覆寫它們。

首先，在 UIkit 原始碼中找到您要變更的 SCSS 變數。例如，全域連結顏色在 /src/scss/components/variables.scss 中定義

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

然後，透過在您自己的檔案（即上述的 site.scss）中設定自訂值來覆寫預設值

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

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

使用掛鉤

為了防止過多的選擇器，我們使用來自 Sass 的 Mixin，它會掛鉤到 UIkit 原始碼中的預定義選擇器，並注入其他屬性。選擇器不必在所有文件中重複，並且可以更輕鬆地進行全域變更。

首先，透過查看組件的 SCSS 檔案，找到您要擴充的規則，例如 Card 組件的 /src/scss/components/card.scss

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

    // mixin to allow adding new declaration
    @include hook-card();
}

然後，使用您自己的 SCSS 檔案中的掛鉤（即上述的 site.scss）注入其他 CSS

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

反向掛鉤

反向掛鉤可讓您自訂組件在使用 .uk-light 或 .uk-dark 修飾符時的樣式 (詳細資訊請查看反向組件)。與 Less 版本相比，Sass 版本中的這些掛鉤處理方式略有不同。在 Sass 版本中，每個組件都有自己的反向掛鉤。您可以查看檔案 src/scss/mixins.scss 時看到所有可用的掛鉤。

例如，您可以讓預設按鈕在用作反向版本時顯示自訂背景。

@mixin hook-inverse-button-default(){
    background: lime;
}

雜項掛鉤

如果沒有可用的變數或掛鉤，您也可以建立自己的選擇器。為此，例如使用 Card 組件的 hook-card-misc() mixin 并在其中寫入選擇器。這會將您的新選擇器排序到已編譯 CSS 檔案中的正確位置。只需將以下行新增至您自己的 SCSS 檔案（即上述的 site.scss）即可

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

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

停用反向組件

反向組件包含其他樣式，以實作彈性的反向行為。如果您的專案不使用這些樣式，您可以在編譯 Sass 時將它們省略。這可以縮小已編譯 CSS 的檔案大小。為此，請搜尋包含 color-mode 的 Sass 變數 (例如 $inverse-global-color-mode)，並將它們設定為 none。

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

$inverse-global-color-mode: none;

您也可以針對特定組件停用反向模式

// Card
$card-primary-color-mode: none;
$card-secondary-color-mode: none;

// Navbar
$navbar-color-mode: none;

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

// Overlay
$overlay-primary-color-mode: none;

// Section
$section-primary-color-mode: none;
$section-secondary-color-mode: none;

// Tile
$tile-primary-color-mode: none;
$tile-secondary-color-mode: none;

如何組織您的主題

在上述範例中，我們已將所有自訂規則直接新增至 site.scss。如果您變更幾個變數，但對其他部分感到滿意，這完全沒問題。但是，對於較大的自訂設定，我們建議僅使用此檔案作為 Sass 編譯器的進入點。您應該將所有規則排序到子資料夾中每個組件的單一檔案中。這與您在預設主題 /src/scss/theme 中找到的結構相同。

<!-- uikit sources, might be in a subfolder when using npm -->
uikit/src/scss/

    components/
        _import.scss
        accordion.scss
        alert.scss
        …

    theme/
        _import.scss
        accordion.scss
        alert.scss
        …

    <!-- other uikit files, some of which we will import below -->
    …

<!-- in here, we now put all your customizations, divided by component -->
theme/

    <!-- create 2 files for each component you customize -->
    accordion.scss <!-- overwrite variables in here -->
    accordion-mixins.scss <!-- use hooks in here -->

    alert.scss
    alert-mixins.scss

    align.scss
    align-mixins.scss

    <!-- etc for all components you customize -->
    …

<!-- this is your entry point to compile scss -->
site.scss

Sass 編譯器的進入點是 site.scss。在這裡，您將依照以下順序編譯所有來源檔案

// site.scss

// 1. Your custom variables and variable overwrites.
@import "theme/accordion.scss";
@import "theme/alert.scss";
@import "theme/align.scss";
// … import all

// 2. Import default variables and available mixins.
@import "uikit/src/scss/variables.scss";
@import "uikit/src/scss/mixins.scss";

// 3. Your custom mixin overwrites.
@import "theme/accordion-mixins.scss";
@import "theme/alert-mixins.scss";
@import "theme/align-mixins.scss";
// … import all

// 4. Import UIkit
@import "uikit/src/scss/uikit.scss";

現在您可以編譯 site.scss，產生的 CSS 將包含您所有的自訂設定。

注意您可以透過將「4.」部分替換為來自 UIkit 原始碼的單一匯入陳述式來進一步擴充此設定。然後，您可以省略一些您不使用的組件，以產生較小的 CSS。只需從 src/scss/components/\_import.scss 複製，並確保保留正確的匯入順序即可。