基礎 - Sass 混合宏

---

---

匯入

它匯入位於 scss/util/_mixins.scss 檔案下的 Sass 混合宏內容。您可以使用以下程式碼行匯入 Sass 混合宏：

@import 'util/mixins';

Sass 參考

您可以使用 Sass 函式更改元件的樣式。

混合宏

您可以使用以下混合宏來構建元件的 CSS 類結構。

CSS-TRIANGLE

它用於建立下拉箭頭、下拉點等。它使用 <i>&::before</i> 或 <i>&::after</i> 選擇器將三角形附加到現有元素。它使用以下格式：

@include css-triangle($triangle-size, $triangle-color, $triangle-direction);

它使用表格中指定的以下引數：

HAMBURGER

它用於建立選單圖示，包括寬度、高度、條數和顏色。它使用以下格式：

@include hamburger($color, $color-hover, $width, $height, $weight, $bars);

它使用表格中指定的以下引數：

BACKGROUND-TRIANGLE

它用於為元素指定背景影像。它使用以下格式：

@include background-triangle($color);

它使用表格中指定的引數：

CLEARFIX

此混合宏自動清除子元素，因此無需額外的標記。它使用以下格式：

@include clearfix;

AUTO-WIDTH

它根據容器中存在的元素數量自動調整元素大小。它使用以下格式：

@include auto-width($max, $elem);

它使用表格中指定的以下引數：

DISABLE-MOUSE-OUTLINE

它用於在識別滑鼠輸入操作時停用元素周圍的輪廓。它使用以下格式：

@include disable-mouse-outline;

ELEMENT-INVISIBLE

它用於隱藏元素，並且可以被鍵盤和其他裝置訪問。它使用以下格式：

@include element-invisible;

ELEMENT-INVISIBLE-OFF

它用於移除不可見的元素，並透過使用 element-invisible() 混合宏來反轉 CSS 輸出。它使用以下格式：

@include element-invisible-off;

VERTICAL-CENTER

它用於透過使用以下格式將元素垂直居中放置在非靜態父元素內部：

@include vertical-center;

HORIZONTAL-CENTER

它用於透過使用以下格式將元素水平居中放置在非靜態父元素內部：

@include horizontal-center;

ABSOLUTE-CENTER

它用於透過使用以下格式將元素絕對居中放置在非靜態父元素內部：

@include absolute-center;