Sass 混合

inner-side-shadow

@include inner-side-shadow($side, $size, $color);

僅為一側建立內部方框陰影

css-triangle

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

建立一個 CSS 三角形，可用於下拉式箭頭、下拉式提示等。在 &::before 或 &::after 選擇器內使用此混合，將三角形附加到現有元素。

hamburger

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

建立一個具有設定寬度、高度、長條數和顏色的選單圖示。此混合使用圖示的高度和長條的粗細來決定間距。

background-triangle

@include background-triangle($color);

將向下三角形新增為元素的背景圖片。圖片格式為 SVG，方便變更顏色。由於 Internet Explorer 不支援編碼 SVG 作為背景圖片，因此也包含 PNG 備用方案。有兩個 PNG 備用方案：黑色三角形和白色三角形。所使用的方案取決於輸入顏色的明度。

clearfix

@include clearfix;

套用 Nicolas Gallagher 推廣的微型 clearfix 技巧。如果容器中的所有子元素都已浮動，請在容器中包含這個混合，以提供容器適當的高度。clearfix 已擴充特定樣式，以防止在 flexbox 環境中出現邊框

深入了解： 微型 Clearfix 技巧

auto-width

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

新增 CSS 以進行「數量查詢」選擇器，根據容器內有多少元素自動調整元素大小。

深入了解： CSS 的數量查詢

disable-mouse-outline

@include disable-mouse-outline;

偵測到滑鼠輸入時，移除元素周圍的焦點環。

element-invisible

@include element-invisible($enforce);

讓元素在視覺上隱藏，但仍可使用鍵盤和輔助裝置存取。

深入了解： 隱藏內容以利於存取

element-invisible-off

@include element-invisible-off($enforce);

反轉 element-invisible() 混合產生的 CSS 輸出。

vertical-center

@include vertical-center;

垂直置中元素在其第一個非靜態父元素內，

深入了解： 使用 Sass 置中

horizontal-center

@include horizontal-center;

水平置中元素在其第一個非靜態父元素內，

深入了解： 使用 Sass 置中

absolute-center

@include absolute-center;

絕對置中元素在其第一個非靜態父元素內，

深入了解： 使用 Sass 置中

border-box

@include border-box;

邊框方塊輔助工具

border-none

@include border-none;

無邊框輔助工具

bordered

@include bordered($width, $type, $color);

有邊框輔助工具：預設為在元素上加入細邊框。

box

@include box($width, $height, $circle);

方塊混合：輕鬆建立正方形、長方形或圓形

display

@include display($display);

顯示類別，預設透過地圖 $prototype-display 呈現

font-wide

@include font-wide($letter-spacing);

字體寬間距！

font-normal

@include font-normal($weight);

字體粗細正常，預設值透過 global-weight-normal 呈現

font-bold

@include font-bold($weight);

字體粗細粗體，預設值透過 global-weight-bold 呈現

font-italic

@include font-italic;

字體樣式斜體

style-type-unordered

@include style-type-unordered($style-type-unordered);

無序清單的樣式類型，預設透過地圖 $prototype-style-type-unordered 呈現

style-type-ordered

@include style-type-ordered($style-type-ordered);

有序清單的樣式類型，預設透過地圖 $prototype-style-type-ordered 呈現

overflow

@include overflow($overflow);

溢位類別，預設透過地圖 $prototype-overflow 呈現

overflow-x

@include overflow-x($overflow);

水平軸的溢位類別，預設透過地圖 $prototype-overflow 呈現

overflow-y

@include overflow-y($overflow);

垂直軸的溢位類別，預設透過地圖 $prototype-overflow 呈現

position

@include position($position, $top, $right, $bottom, $left);

位置類別，預設透過地圖 $prototype-position 呈現，其中所有偏移值都乘以 $global-position，預設等於 1rem。

position-fixed-top

@include position-fixed-top($z-index);

固定定位在頂部角落

position-fixed-bottom

@include position-fixed-bottom($z-index);

固定定位在底部角落

rotate

@include rotate($deg);

旋轉 Mixin：將元素旋轉到某個角度

rotateX

@include rotateX($deg);

RotateX Mixin：將元素在 X 軸上旋轉到某個角度

rotateY

@include rotateY($deg);

RotateY Mixin：將元素在 Y 軸上旋轉到某個角度

rotateZ

@include rotateZ($deg);

RotateZ Mixin：將元素在 Z 軸上旋轉到某個角度

border-radius

@include border-radius($radius);

圓角實用程式（所有角落）：預設將圓角（所有角落）新增到元素。

border-rounded

@include border-rounded;

圓角正方形實用程式或長方形實用程式（所有角落）：預設將所有角落圓角化，形成藥丸形狀。

separator

@include separator($align, $height, $width, $background, $top);

標題分隔線實用程式，主要用於設定區段標題的樣式

shadow

@include shadow($shadow);

陰影實用程式：預設將淺色方框陰影新增到元素。

max-width-100

@include max-width-100;

最大寬度 100 實用程式。

max-height-100

@include max-height-100;

最大高度 100 實用程式。

margin

@include margin($top, $right, $bottom, $left);

邊界輔助 mixin，所有值都乘以 $global-margin，預設值為 1rem

padding

@include padding($top, $right, $bottom, $left);

內邊距輔助 mixin，所有值都乘以 $global-padding，預設值為 1rem

margin-direction

@include margin-direction($dir, $spacer);

特定方向屬性的邊界類別

padding-direction

@include padding-direction($dir, $spacer);

特定方向屬性的內距類別

text-decoration

@include text-decoration($decoration);

文字裝飾，預設透過地圖 $prototype-text-decoration 產生

text-transform

@include text-transform($transformation);

文字轉換，預設透過地圖 $prototype-text-transformation 產生

text-hide

@include text-hide;

影像替換工具程式。text-hide

text-truncate

@include text-truncate($overflow);

截斷文字，預設為省略號。

text-nowrap

@include text-nowrap;

不換行文字。text-nowrap

text-wrap

@include text-wrap;

換行文字。text-wrap

first

@include first($num) { }

從第一個到 $num 選取所有子項。

first-child

@include first-child { }

選取第一個精確的子項

last

@include last($num) { }

從最後一個到 $num 選取所有子項。

last-child

@include last-child { }

選取最後一個精確的子項

every

@include every($num) { }

每 $num 個選取一個子項。

first-last

@include first-last { }

僅選取第一個和最後一個子項。

after-first

@include after-first($num) { }

從第一個到 $num 選取所有子項。

from-last

@include from-last($num) { }

從最後一個開始，選取 $num 個子項。

from-first-last

@include from-first-last($num) { }

從第一個開始選取 $num 個子項，從最後一個開始選取 $num 個子項。

all-but

@include all-but($num) { }

選取所有子項，但排除 $num 個。

all-but-first-last

@include all-but-first-last($num) { }

選取從第一個開始的 $num 個和從最後一個開始的 $num 個之間的所有子項。

unique

@include unique { }

如果子元素是唯一的，則只會選取它。這表示如果至少有 2 個子元素，則不會套用樣式。

not-unique

@include not-unique { }

如果子元素不是唯一的，則只會選取它們。這表示如果至少有 2 個子元素，則會套用樣式。

between

@include between($first, $last) { }

選取介於 $first 和 $last 之間的所有子元素。

even

@include even { }

選取所有偶數子元素。

even-between

@include even-between($first, $last) { }

選取介於 $first 和 $last 之間的所有偶數子元素。

odd

@include odd { }

選取所有奇數子元素。

odd-between

@include odd-between($first, $last) { }

選取介於 $first 和 $last 之間的所有奇數子元素。

number-between

@include number-between($num, $first, $last) { }

選取介於 $first 和 $last 之間的所有 $num 子元素。