Foundation for Sites6.8.1 變更日誌
元件清單

原型製作工具

使用 Foundation 的原型製作工具快速製作版面和 UI 原型。這些選用類別和混合非常適合將草圖和模型快速轉換為編碼原型。

原型製作到生產

原型製作讓我們能在開發過程中更清楚（而且通常更早）地看到問題。草圖或線框中的設計只能讓我們了解行為、可行性和實作成本（時間或資源）。原型製作過程促進設計師和開發人員緊密合作，找到更好的解決方案。

有時候原型碼是注定要被丟棄的，這沒關係。在早期開發階段，取得想法和互動並與利害關係人分享以供審查非常有價值。這正是想法如何充實和改善的方式。我們提供的不是程式碼，而是解決方案。提出想法、取得回饋、反覆運算、重複。然後，當所有相關人員都滿意採取正確的方法時，再回去清理並重構。

Foundation 的原型製作工具可協助您從頭開始建立編碼原型，速度超快。這讓您可以透過回饋和實驗更快找到正確答案。從定位到視覺樣式，有多種工具可供選擇。每個工具都有混合，因此您可以在生產中使用自己的自訂類別或將類別替換為混合以獲得更簡潔的標記。

原型模式預設停用！

並非所有專案都需要原型化工具程式，而且加入這些工具程式類別會增加 CSS 檔案大小，特別是在你沒有使用所有類別時。基於這些原因，原型模式預設停用。

許多原型類別使用 `!important` 來確保它們不會被更具體的選擇器覆寫。此架構審慎避免使用 `!important` 宣告。請注意，我們只在那些特定 **CSS** 屬性上插入 `!important`，這些屬性無論如何都不應該被覆寫。

啟用原型模式

以下這些類型的原型類別只應於原型化任務中使用。此外，如果你使用 **Sass**，我們建議你改用 **[原型化混入](#sass-mixins)**。

使用 Foundation 的 Sass 版本，你可以用兩種方式啟用原型模式

如果你在主 Sass 檔案中使用 foundation-everything() 混入，只要傳入 $prototype: true 即可啟用原型模式。

@include foundation-everything($prototype: true);

如果你手動包含每個元件（就像我們的入門專案所做的那樣），開啟你的 app.scss 檔案並簡單地註解

// @include foundation-prototype-classes;

它會看起來像

@include foundation-prototype-classes;

你也可以只匯入你需要的特定工具程式類別。為了簡化，以下包含完整的清單

@include foundation-prototype-typescale;
@include foundation-prototype-text-utilities;
@include foundation-prototype-text-transformation;
@include foundation-prototype-text-decoration;
@include foundation-prototype-font-styling;
@include foundation-prototype-list-style-type;
@include foundation-prototype-rounded;
@include foundation-prototype-bordered;
@include foundation-prototype-shadow;
@include foundation-prototype-arrow;
@include foundation-prototype-separator;
@include foundation-prototype-overflow;
@include foundation-prototype-display;
@include foundation-prototype-position;
@include foundation-prototype-border-box;
@include foundation-prototype-border-none;
@include foundation-prototype-sizing;
@include foundation-prototype-spacing;

尋找更多自訂化？按一下這裡以取得 Sass 參考

回應式中斷點

回應式中斷點預設停用。

這些原型類別也有選用的行動裝置優先回應式類別，因此設定類別會套用至小型中斷點和大中斷點，除非被較大中斷點的類別覆寫。
你可以透過將 $global-prototype-breakpoints 設為 true 來輕鬆啟用這些類別。

<p class="medium-text-uppercase">This text will be uppercase for medium and up.</p>
<p class="large-text-lowercase">This text will be lowercase for large breakpoint.</p>

你也可以自訂內容，選擇只為你需要的特定原型輔助程式新增回應式中斷點，作為回應式類別。
例如，文字轉換類別有一個中斷點變數 $prototype-transformation-breakpoints，它設為 $global-prototype-breakpoints，而後者預設設為 false。若要啟用文字轉換類別的回應式中斷點，只要設定

$prototype-transformation-breakpoints: true;

元件造型

這些 .radius、.rounded、.bordered 和 .shadow 類別可以獨立或一起使用來為元件造型，分別透過將其四角變圓、給予淺色邊框，以及為其建立陰影。最常使用於按鈕、卡片、表格、圖片等等。

**Sass 提示**：你可以使用 [Shadow](#shadow) 混入來建立類似 `shadow-hover-focus` 的東西。[Codepen 範例](https://codepen.io/IamManchanda/pen/XMRMwo)

在影片中觀看此部分

按鈕

<button type="button" class="button radius bordered shadow primary">Primary</button>
<button type="button" class="button rounded bordered shadow secondary">Secondary</button>
<button type="button" class="button radius bordered shadow success">Success</button>
<button type="button" class="button rounded bordered shadow alert">Alert</button>
<button type="button" class="button radius bordered shadow warning">Warning</button>

切換開關

將 .rounded 類別新增至 .switch 以使其變為圓形。

<div class="switch rounded">
  <input class="switch-input" id="exampleSwitch" type="checkbox" name="exampleSwitch">
  <label class="switch-paddle" for="exampleSwitch">
    <span class="show-for-sr">Download Kittens</span>
  </label>
</div>

卡片

<div class="radius bordered shadow card">
  <img src="https://placehold.it/500x250">
  <div class="card-divider">
    Styled Card
  </div>
  <div class="card-section">
    <h4>This is a card.</h4>
    <p>It has an easy to override visual style, and is appropriately subdued.</p>
  </div>
</div>
樣式化卡片

這是一個卡片。

它具有容易覆寫的視覺樣式，並且適當地低調。

樣式化卡片

這是一個卡片。

它具有容易覆寫的視覺樣式，並且適當地低調。

樣式化卡片

這是一個卡片。

它具有容易覆寫的視覺樣式，並且適當地低調。

表格

<table class="radius bordered shadow">
    <!-- My Table goes here -->
</table>
表格標題 表格標題 表格標題 表格標題
內容在此 這是較長的內容 Donec id elit non mi porta gravida at eget metus。 內容在此 內容在此
內容在此 這是較長的內容內容在此 Donec id elit non mi porta gravida at eget metus。 內容在此 內容在此
內容在此 這是較長的內容 Donec id elit non mi porta gravida at eget metus。 內容在此 內容在此
內容在此 這是較長的內容內容在此 Donec id elit non mi porta gravida at eget metus。 內容在此 內容在此

圖片

<img src="https://placehold.it/150x150" class="radius">

箭頭工具

主要用作導覽的下拉箭頭。

<div class="arrow-down"></div>
<div class="arrow-up"></div>
<div class="arrow-right"></div>
<div class="arrow-left"></div>

分隔線

這會在元素標題下方建立一個微小的分隔線，通常用於區段標題內。

你不必使用 [文字對齊類別](typography-helpers.html#text-alignment)，因為這個分隔線工具會處理文字本身的對齊。 
<h3 class="separator-left">Lorem</h3>
<h3 class="separator-center">Ipsum Dolor</h3>
<h3 class="separator-right">Tempor</h3>

Lorem

Ipsum Dolor

Tempor

字型樣式

你可以使用字型樣式來設定文字樣式。你可以透過將 font-normal、font-bold、font-italic 新增至元素來變更字型樣式。你也可以使用 font-wide 放大元素的文字。

<p class="font-wide">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<p class="font-normal">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p class="font-bold">Perspiciatis tempore cumque, magni aspernatur, quidem. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse</p>
<p class="font-italic">Lorem minus, placeat, cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.iure voluptas aliquam tempora neque?</p>

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Perspiciatis tempore cumque, magni aspernatur, quidem. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

Lorem minus, placeat, cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.iure voluptas aliquam tempora neque?

清單樣式

請注意，[無項目符號清單](typography-helpers.html#un-bulleted-list)，`.no-bullet` 預設啟用於順序和非順序清單。

非順序清單

<ul class="no-bullet"></ul>
<ul class="list-disc"></ul>
<ul class="list-circle"></ul>
<ul class="list-square"></ul>

順序清單

<ol class="no-bullet"></ol>
<ol class="list-decimal"></ol>
<ol class="list-lower-alpha"></ol>
<ol class="list-lower-latin"></ol>
<ol class="list-lower-roman"></ol>
<ol class="list-upper-alpha"></ol>
<ol class="list-upper-latin"></ol>
<ol class="list-upper-roman"></ol>

文字輔助

影像替換（文字隱藏）

您可以包含影像，並使用視覺上隱藏的輔助文字，以提升無障礙性和改善 SEO。.text-hide 類別會在影像的內容中視覺上隱藏元素的文字。

<a href="#" class="text-hide">
  <img src="https://placehold.it/100x30" alt="zurb logo">
  Zurb <!-- Logo Text  -->
</a>
zurb logo Zurb

文字轉換

文字轉換可讓您控制文字的大小寫。您可以透過將 .text-uppercase、text-lowercase、text-capitalize 加入元素，來變更文字轉換。

<p class="text-uppercase"><!-- Text here --></p>
<p class="text-lowercase"><!-- Text here --></p>
<p class="text-capitalize"><!-- Text here --></p>

這是大寫文字。設置於 0 F.E.（「基金會紀元」）年，心理史學家在 12,000 年歷史的銀河帝國首都川陀展開。雖然帝國看似穩定且強大，但它正緩慢衰敗，與西羅馬帝國的衰落類似。

這是小寫文字。設置於 0 F.E.（「基金會紀元」）年，心理史學家在 12,000 年歷史的銀河帝國首都川陀展開。雖然帝國看似穩定且強大，但它正緩慢衰敗，與西羅馬帝國的衰落類似。

這是 CaPitAlized teXt。設置於 yEar 0 F.E.（「基金會紀元」）年，The PsychohisTorians 在 12,000 年歷史的銀河帝國首都川陀展開。雖然帝國看似穩定且強大，但它正緩慢衰敗，與西羅馬帝國的衰落類似。

注意：`.text-capitalize` 會變更每個單字的第一個字母，其他字母的大小寫則不受影響。

文字裝飾

文字裝飾可讓您為文字加上底線、上線或刪除線。您可以透過將 .text-underline、.text-overline 或 .text-line-through 加入元素，來變更文字裝飾。

<p class="text-underline">Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>
<p class="text-overline">Perspiciatis tempore cumque, magni aspernatur, quidem</p>
<p class="text-line-through">Lorem minus, placeat, iure voluptas aliquam tempora neque?</p>

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Perspiciatis tempore cumque, magni aspernatur, quidem

Lorem minus, placeat, iure voluptas aliquam tempora neque?

文字截斷

.text-truncate 類別會截斷文字並顯示省略符號。此類別適用於單行文字。

<p class="text-truncate">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam voluptatem similique officiis recusandae esse cum in totam quisquam perspiciatis quod! Magnam culpa vitae, tempore eos explicabo cupiditate. Deserunt, quisquam, quos!</p>

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam voluptatem similique officiis recusandae esse cum in totam quisquam perspiciatis quod! Magnam culpa vitae, tempore eos explicabo cupiditate. Deserunt, quisquam, quos!

文字不換行

如果你想防止文字換到下一行，可以使用 .text-nowrap。請注意，除非使用 <br> 標籤，否則文字將繼續在同一行中。

<p class="text-nowrap">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam voluptatem similique officiis recusandae esse cum in totam quisquam perspiciatis quod! Magnam culpa vitae, tempore eos explicabo cupiditate. Deserunt, quisquam, quos!</p>

文字換行

若要強制文字換到下一行，可以使用 .text-wrap。

<p class="text-wrap">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam voluptatem similique officiis recusandae esse cum in totam quisquam perspiciatis quod! Magnam culpa vitae, tempore eos explicabo cupiditate. Deserunt, quisquam, quos!</p>

邊界間距輔助工具

使用這些易於使用的邊界間距類別，在元素周圍產生間距。

請注意，在以下範例中，`1 = 1 * $global-margin` 等。預設情況下，`$global-margin` 等於 `1rem`，你可以透過 [Sass 變數](#sass-variables) 輕鬆自訂。

在影片中觀看此部分

邊界間距（所有邊）

<div class="margin-0"></div>
<div class="margin-1"></div>
<div class="margin-2"></div>
<div class="margin-3"></div>

邊界間距頂端

<div class="margin-top-0"></div>
<div class="margin-top-1"></div>
<div class="margin-top-2"></div>
<div class="margin-top-3"></div>

邊界間距底端

<div class="margin-bottom-0"></div>
<div class="margin-bottom-1"></div>
<div class="margin-bottom-2"></div>
<div class="margin-bottom-3"></div>

邊界間距左邊

<div class="margin-left-0"></div>
<div class="margin-left-1"></div>
<div class="margin-left-2"></div>
<div class="margin-left-3"></div>

邊界間距右邊

<div class="margin-right-0"></div>
<div class="margin-right-1"></div>
<div class="margin-right-2"></div>
<div class="margin-right-3"></div>

邊界間距左右（水平軸）

<div class="margin-horizontal-0"></div>
<div class="margin-horizontal-1"></div>
<div class="margin-horizontal-2"></div>
<div class="margin-horizontal-3"></div>

邊界間距上下（垂直軸）

<div class="margin-vertical-0"></div>
<div class="margin-vertical-1"></div>
<div class="margin-vertical-2"></div>
<div class="margin-vertical-3"></div>

邊界間距：作為混合使用

.foo {
  @include margin(1, 0, 2, null);
}

以上程式碼會產生以下輸出

.foo {
  margin-top: 1rem !important;
  margin-right: 0 !important;
  margin-bottom: 2rem !important;
}

注意：margin-left 屬性未列印，因為此混合也接受 null 作為值，以減少 CSS 輸出。 在此查看 Sass 參考

內邊距輔助工具

使用這些易於使用的內邊距類別，在內容周圍產生間距。

請注意，在以下範例中，`1 = 1 * $global-padding` 等。預設情況下，`$global-padding` 等於 `1rem`，你可以透過 [Sass 變數](#sass-variables) 輕鬆自訂。

內邊距（所有邊）

<div class="padding-0"></div>
<div class="padding-1"></div>
<div class="padding-2"></div>
<div class="padding-3"></div>

內邊距頂端

<div class="padding-top-0"></div>
<div class="padding-top-1"></div>
<div class="padding-top-2"></div>
<div class="padding-top-3"></div>

內邊距底端

<div class="padding-bottom-0"></div>
<div class="padding-bottom-1"></div>
<div class="padding-bottom-2"></div>
<div class="padding-bottom-3"></div>

內邊距左邊

<div class="padding-left-0"></div>
<div class="padding-left-1"></div>
<div class="padding-left-2"></div>
<div class="padding-left-3"></div>

內邊距右邊

<div class="padding-right-0"></div>
<div class="padding-right-1"></div>
<div class="padding-right-2"></div>
<div class="padding-right-3"></div>

內邊距左右（水平軸）

<div class="padding-horizontal-0"></div>
<div class="padding-horizontal-1"></div>
<div class="padding-horizontal-2"></div>
<div class="padding-horizontal-3"></div>

內邊距上下（垂直軸）

<div class="padding-vertical-0"></div>
<div class="padding-vertical-1"></div>
<div class="padding-vertical-2"></div>
<div class="padding-vertical-3"></div>

內邊距：作為混合使用

.bar {
  @include padding(1, 0, 2, null);
}

以上程式碼會產生以下輸出

.bar {
  padding-top: 1rem !important;
  padding-right: 0 !important;
  padding-bottom: 2rem !important;
}

注意：padding-left 屬性未列印，因為此混合也接受 null 作為值，以減少 CSS 輸出。 在此處查看 Sass 參考

調整大小

這些寬度和高度類別可協助您輕鬆地讓元素的寬度或高度相對於其父元素所需要的寬度或高度。預設支援 25%、50%、75% 和 100%。不過，您可以透過 Sass 地圖變數新增更多尺寸。

寬度

<div class="width-25"></div>
<div class="width-50"></div>
<div class="width-75"></div>
<div class="width-100"></div>

<div class="max-width-100"></div>

高度

<div class="height-25"></div>
<div class="height-50"></div>
<div class="height-75"></div>
<div class="height-100"></div>

<div class="max-height-100"></div>

邊框盒

邊框盒讓您只能在寬度和高度 CSS 屬性中新增內容、內距和邊框，但不能新增邊界。

<div class="border-box"></div>

無邊框

無邊框讓您能快速將任何元素的邊框重設為 none。

<div class="callout primary border-none">
  Hi! I am a callout with no Borders
</div>
哈囉！我是沒有邊框的標題

顯示類別

顯示類別讓您能變更任何元素的顯示屬性。

<div class="display-inline"></div>
<div class="display-inline-block"></div>
<div class="display-block"></div>
<div class="display-table"></div>
<div class="display-table-cell"></div>

這些類別涵蓋一些最常使用的顯示類型。MDN 中指定了許多其他顯示值，在此處。如果您需要其中一些類別，您可以透過 Sass 變數和 $prototype-display 輕鬆新增它們。Sass 參考 在此處

  • 對於 `display: flex`，請使用 `.flex-container`。請參閱 [Flexbox 參考](flexbox.html)
  • 對於 `display: none`，請使用 `.hide`。或 Foundation 的 [可見度類別](visibility.html)

定位

定位類別可協助您變更元素的位置值。預設情況下，元素的位置值為 static。

<div class="position-relative"></div>
<div class="position-absolute"></div>
<div class="position-fixed"></div>
<div class="position-fixed-top"></div>
<div class="position-fixed-bottom"></div>
<div class="position-static"></div>

定位：作為混合使用

定位混合可用於設定位置，並設定 top right bottom 和/或 left 屬性，所有屬性一次設定。

.foo {
  @include position(fixed, 1, 2, 0, null);
}

以上程式碼會產生以下輸出

.foo {
  position: fixed !important;
  top: 1rem !important;
  right: 2rem !important;
  bottom: 0 !important;
}

請注意，left 偏移量未列印，因為此混合也接受 null 作為值。Sass 參考 在此處

溢位

這些溢位類別可協助您裁剪內容、呈現捲軸列，或當內容溢位其區塊層容器時，僅顯示內容。

所有側邊

<div class="overflow-visible"></div>
<div class="overflow-hidden"></div>
<div class="overflow-scroll"></div>

水平軸

<div class="overflow-x-visible"></div>
<div class="overflow-x-hidden"></div>
<div class="overflow-x-scroll"></div>

垂直軸

<div class="overflow-y-visible"></div>
<div class="overflow-y-hidden"></div>
<div class="overflow-y-scroll"></div>

注意：在 CSS 規格中，將 X 或 Y 方向的 overflow: hidden 與相反方向的 overflow: visible 結合使用，無法達到預期的效果。更多資訊

Sass Mixin 輔助程式

我們也提供一些額外的實用程式 mixin，供您在下一項原型專案中使用。

Box Mixin

此 mixin 可協助您輕鬆建立正方形、長方形或圓形。Sass 參考 在此處

.foo {
    @include box(1rem, 2rem); // Rectangle
}

.bar {
    @include box(1rem); // Square
}

.baz {
    @include box(1rem, $circle: true); // Circle
}

Rotate Mixin

這些 Rotate mixin 可讓您將元素旋轉到特定角度。順時針為預設方向，但在角度前加上 - 則會變成逆時針。

.foo {
    @include rotate(30); // 30 Degree
}

.bar {
    @include rotateX(60); // 60 Degree on X axis
}

.baz {
    @include rotateY(90); // 90 Degree on Y axis
}

.shaz {
    @include rotateZ(120); // 120 Degree on Z axis
}

關聯式 Mixin（又稱：nth:child mixin）

這些關聯式 mixin 可協助您透過簡易的 Sass mixin 管理 :nth-child 化元素的樣式。

@include first($num) {} // applies style to first n children
@include first-child {} // applies style to first child only
@include last($num) {}  // applies style to last n children
@include last-child {}  // applies style to first child only
@include every($num) {} // applies style to every n children
@include first-last {}  // applies style to first and last child only
@include after-first($num) {} // applies style to all after nth child
@include from-last($num) {} // applies style to all after and including nth child
@include from-first-last($num) {} // applies style to nth child from first child and last child
@include all-but($num) {} // applies style to all except nth child
@include all-but-first-last($num) {} // applies style all except first and last child
@include unique {} // applies style to a child who has no siblings
@include not-unique {} // applies style to all children except a child who has no siblings
@include between($first, $last) {} // applies style to all except first and last child
@include even {} // applies style to all even children
@include even-between($first, $last) {} // applies style to all even children except first and last
@include odd {} // applies style to all odd children
@include odd-between($first, $last) {} // applies style to all odd children except first and last
@include number-between($num, $first, $last) {} // applies style to every n children from first child and last child

Sass 參考

變數

此元件的預設樣式可使用專案 設定檔 中的這些 Sass 變數進行自訂。

名稱類型預設值說明
$prototype-arrow-directions Map down
up
right
left

包含所有 arrow 方向的 Map
$prototype-arrow-size 數字 0.4375rem

箭頭寬度，預設為 0.4375rem。
$prototype-arrow-color 顏色 $black

箭頭顏色，預設為 $black。
$prototype-border-box-breakpoints 布林值 $global-prototype-breakpoints

邊框方塊的回應式中斷點。
$prototype-border-none-breakpoints 布林值 $global-prototype-breakpoints

無邊框的回應式中斷點。
$prototype-bordered-breakpoints 布林值 $global-prototype-breakpoints

帶邊框實用程式功能的回應式中斷點。
$prototype-border-width 數字 rem-calc(1)

prototype-border-width 的預設值
$prototype-border-type 字串 solid

prototype-border-type 的預設值
$prototype-border-color 顏色 $medium-gray

prototype-border-color 的預設值預設為 medium-gray
$prototype-display-breakpoints 布林值 $global-prototype-breakpoints

顯示類別的回應式中斷點
$prototype-display Map inline
inline-block
block
table
table-cell

包含所有 display 類別的地圖
$prototype-font-breakpoints 布林值 $global-prototype-breakpoints

字體樣式類型的回應式中斷點
$prototype-wide-letter-spacing 數字 rem-calc(4)

.font-wide 的字元間距
$prototype-font-normal 數字 $global-weight-normal

.font-normal 的預設粗細，預設為 global-weight-normal
$prototype-font-bold 數字 $global-weight-bold

.font-bold 的預設粗細，預設為 global-weight-bold
$prototype-list-breakpoints 布林值 $global-prototype-breakpoints

清單樣式類型的回應式中斷點
$prototype-style-type-unordered Map disc
circle
square

包含所有 style-type-unordered 類別的地圖
$prototype-style-type-ordered Map decimal
lower-alpha
lower-latin
lower-roman
upper-alpha
upper-latin
upper-roman

包含所有 style-type-ordered 類別的地圖
$prototype-overflow-breakpoints 布林值 $global-prototype-breakpoints

溢位輔助類別的回應式中斷點
$prototype-overflow Map visible
hidden
scroll

包含所有 overflow 類別的地圖
$prototype-position-breakpoints 布林值 $global-prototype-breakpoints

位置輔助的回應式中斷點
$prototype-position Map static
relative
absolute
fixed

包含所有 position 類別的地圖
$prototype-position-z-index 數字 975

固定定位的 z-index
$prototype-rounded-breakpoints 布林值 $global-prototype-breakpoints

圓角實用工具的回應式中斷點。
$prototype-border-radius 數字 rem-calc(3)

prototype-border-radius 的預設值
$prototype-separator-breakpoints 布林值 $global-prototype-breakpoints

分隔線的回應式中斷點。
$prototype-separator-align 字串 center

分隔線的預設對齊方式。
$prototype-separator-height 數字 rem-calc(2)

分隔線的高度。
$prototype-separator-width 數字 3rem

分隔線的寬度。
$prototype-separator-background 顏色 $primary-color

分隔線的預設顏色。
$prototype-separator-margin-top 數字 $global-margin

分隔線的上邊距。
$prototype-shadow-breakpoints 布林值 $global-prototype-breakpoints

陰影公用程式回應式中斷點。
$prototype-box-shadow 數字 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12)

prototype-box-shadow 的預設值
$prototype-sizing-breakpoints 布林值 $global-prototype-breakpoints

間距類別（邊界和內距）的回應式中斷點
$prototype-sizing Map width
height

包含所有 sizing 類別的地圖
$prototype-sizes Map 25: 25%
50: 50%
75: 75%
100: 100%

包含所有大小的地圖。
$prototype-spacing-breakpoints 布林值 $global-prototype-breakpoints

間距類別（邊界和內距）的回應式中斷點
$prototype-spacers-count 數字 3

預設的間距計數（邊界和內距）
$prototype-decoration-breakpoints 布林值 $global-prototype-breakpoints

文字裝飾類別的回應式中斷點
$prototype-text-decoration Map overline
underline
line-through

包含所有 text-decoration 類別的地圖
$prototype-transformation-breakpoints 布林值 $global-prototype-breakpoints

文字轉換類別的回應式中斷點
$prototype-text-transformation Map lowercase
uppercase
capitalize

包含所有 text-transformation 類別的地圖
$prototype-utilities-breakpoints 布林值 $global-prototype-breakpoints

文字公用程式的回應式中斷點
$prototype-text-overflow 字串 ellipsis

text-overflow 變數的預設值

混合

我們使用這些混合來建立此元件的最終 CSS 輸出。您可以自行使用混合，從我們的元件中建立自己的類別結構。

border-box

@include border-box;

邊框方塊公用程式

border-none

@include border-none;

無邊框公用程式

bordered

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

帶邊框公用程式：預設為元素新增淺色邊框。

參數類型預設值說明
$width 數字 $prototype-border-width

邊框寬度
$type 字串 $prototype-border-type

邊框類型
$color 顏色 $prototype-border-color

邊框顏色

box

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

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

參數類型預設值說明
$width 數字 無

方塊寬度
$height 數字 $width

方塊高度，預設為 $width，以便輕鬆建立正方形
$circle 布林值 false

將方塊設為圓形，預設為 false。

display

@include display($display);

顯示類別，預設透過地圖 $prototype-display 傳遞

參數類型預設值說明
$display 字串 無

顯示類別

font-wide

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

字體寬字距！

參數類型預設值說明
$letter-spacing 數字 $prototype-wide-letter-spacing

字體寬鬆間距

font-normal

@include font-normal($weight);

字重正常，預設值來自 global-weight-normal

參數類型預設值說明
$weight 數字 $prototype-font-normal

字重（正常）

font-bold

@include font-bold($weight);

字重粗體，預設值來自 global-weight-bold

參數類型預設值說明
$weight 數字 $prototype-font-bold

字重（粗體）

font-italic

@include font-italic;

字體樣式斜體

style-type-unordered

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

無序清單的樣式類型，預設來自映射 $prototype-style-type-unordered

參數類型預設值說明
$style-type-unordered 字串 無

無序清單的樣式類型

style-type-ordered

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

有序清單的樣式類型，預設來自映射 $prototype-style-type-ordered

參數類型預設值說明
$style-type-ordered 字串 無

有序清單的樣式類型

overflow

@include overflow($overflow);

溢位類別，預設來自映射 $prototype-overflow

參數類型預設值說明
$overflow 字串 無

溢位類別

overflow-x

@include overflow-x($overflow);

水平軸的溢位類別，預設來自映射 $prototype-overflow

參數類型預設值說明
$overflow 字串 無

溢位類別（水平軸）

overflow-y

@include overflow-y($overflow);

垂直軸的溢位類別，預設來自映射 $prototype-overflow

參數類型預設值說明
$overflow 字串 無

溢位類別（垂直軸）

position

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

位置類別，預設來自映射 $prototype-position，其中所有偏移值都乘以 $global-position，預設等於 1rem。

參數類型預設值說明
$position 字串 無

位置類別，可能是 static、relative、absolute 或 fixed
$top 數字 null

頂部偏移
$right 數字 null

右側偏移
$bottom 數字 null

底部偏移
$left 數字 null

左側偏移

position-fixed-top

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

固定在頂部角落的位置

參數類型預設值說明
$z-index 數字 $prototype-position-z-index

position-fixed-top 的 z-index

position-fixed-bottom

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

固定在底部角落的位置

參數類型預設值說明
$z-index 數字 $prototype-position-z-index

position-fixed-bottom 的 z-index

rotate

@include rotate($deg);

旋轉混合：將元素旋轉到某個角度

參數類型預設值說明
$deg 數字 無

旋轉角度

rotateX

@include rotateX($deg);

RotateX Mixin：將元素旋轉到 X 軸上的特定度數

參數類型預設值說明
$deg 數字 無

旋轉角度

rotateY

@include rotateY($deg);

RotateY Mixin：將元素旋轉到 Y 軸上的特定度數

參數類型預設值說明
$deg 數字 無

旋轉角度

rotateZ

@include rotateZ($deg);

RotateZ Mixin：將元素旋轉到 Z 軸上的特定度數

參數類型預設值說明
$deg 數字 無

旋轉角度

border-radius

@include border-radius($radius);

圓角工具程式（所有角）：預設為將圓角（所有角）新增到元素。

參數類型預設值說明
$radius 數字 $prototype-border-radius

邊框圓角（所有角）

border-rounded

@include border-rounded;

圓角方形工具程式或矩形工具程式（所有角）：預設將所有角圓角化為元素，以形成藥丸形狀。

separator

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

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

參數類型預設值說明
$align 字串 $prototype-separator-align

分隔線對齊
$height 數字 $prototype-separator-height

寬度
$width 數字 $prototype-separator-width

高度
$background 顏色 $prototype-separator-background

背景
$top 數字 $prototype-separator-margin-top

上邊距

shadow

@include shadow($shadow);

陰影工具程式：預設為將淺色方框陰影新增到元素。

參數類型預設值說明
$shadow 數字 $prototype-box-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

參數類型預設值說明
$top 數字 null

上邊距
$right 數字 null

右邊距
$bottom 數字 null

下邊距
$left 數字 null

左邊距

padding

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

內距輔助 Mixin，所有值都乘以 $global-padding，預設等於 1rem

參數類型預設值說明
$top 數字 null

上內距
$right 數字 null

右內距
$bottom 數字 null

下內距
$left 數字 null

左內距

margin-direction

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

特定方向屬性的邊距類別

參數類型預設值說明
$dir 字串 無

方向
$spacer 數字 無

間隔

padding-direction

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

特定方向屬性的內距類別

參數類型預設值說明
$dir 字串 無

方向
$spacer 數字 無

間隔

text-decoration

@include text-decoration($decoration);

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

參數類型預設值說明
$decoration 字串 無

文字裝飾

text-transform

@include text-transform($transformation);

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

參數類型預設值說明
$transformation 字串 無

文字轉換

text-hide

@include text-hide;

圖片替換工具。text-hide

text-truncate

@include text-truncate($overflow);

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

參數類型預設值說明
$overflow 字串 $prototype-text-overflow

文字截斷

text-nowrap

@include text-nowrap;

文字不換行。text-nowrap

text-wrap

@include text-wrap;

文字換行。text-wrap

first

@include first($num) { }

從第一個到 $num 選擇所有子元素。

參數類型預設值說明
$num 數字 無

總子元素中的前 n 個數字

first-child

@include first-child { }

選擇第一個確切的子元素

last

@include last($num) { }

從最後一個到 $num 選擇所有子元素。

參數類型預設值說明
$num 數字 無

總子元素中的最後 n 個數字

last-child

@include last-child { }

選擇最後一個確切的子元素

every

@include every($num) { }

每 $num 個子元素選擇一個。

參數類型預設值說明
$num 數字 無

所有子元素中的每 n 個數字

first-last

@include first-last { }

僅選擇第一個和最後一個子元素。

after-first

@include after-first($num) { }

從第一個到 $num 選擇所有子元素。

參數類型預設值說明
$num 數字 無

總子元素中的第一個 n 個數字之後

from-last

@include from-last($num) { }

從最後一個開始，選擇 $num 個子元素。

參數類型預設值說明
$num 數字 無

總子元素中的最後 n 個數字之前

from-first-last

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

從第一個選擇 $num 個子元素，從最後一個選擇 $num 個子元素。

參數類型預設值說明
$num 數字 無

從第一個和最後一個呼叫的 n 個數字

all-but

@include all-but($num) { }

選擇所有子元素，但 $num 除外。

參數類型預設值說明
$num 數字 無

應從所有其他子元素中排除的 n 個數字

all-but-first-last

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

選擇 $num 個第一個子元素和 $num 個最後一個子元素之間的所有子元素。

參數類型預設值說明
$num 數字 無

從所有其他子元素中排除第一個和最後一個的 n 個數字

unique

@include unique { }

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

not-unique

@include not-unique { }

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

between

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

選取介於 $first 和 $last 之間的所有子項目。

參數類型預設值說明
$first 數字 無

第一個 nth 數字
$last 數字 無

最後一個 nth 數字

even

@include even { }

選取所有偶數子項目。

even-between

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

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

參數類型預設值說明
$first 數字 無

第一個 nth 數字
$last 數字 無

最後一個 nth 數字

odd

@include odd { }

選取所有奇數子項目。

odd-between

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

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

參數類型預設值說明
$first 數字 無

第一個 nth 數字
$last 數字 無

最後一個 nth 數字

number-between

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

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

參數類型預設值說明
$num 數字 無

介於 $first 和 $last 之間的每 n 個數字。
$first 數字 無

第一個 n 個數字
$last 數字 無

最後一個 n 個數字