Foundation for Sites6.8.1 變更紀錄
元件清單

Sass 函數

在幕後，Foundation 由一組實用程式 Sass 函數提供支援，協助我們處理色彩、單位、選取器等等。

匯入

Foundation 的所有 Sass 實用程式都位於 scss/util 資料夾中，並依類別分為多個檔案。您可以使用這行程式碼一次匯入每個實用程式檔案

@import 'util/util';

或者，可以個別匯入實用程式。

// Color manipulation
@import 'util/color';

// Selector generation
@import 'util/selector';

// Unit manipulation and conversion
@import 'util/unit';

// Value checking and extraction
@import 'util/value';

變數、函數或以 -zf- 為字首的混合被視為內部 API 的一部分，這表示它們可能會在沒有警告的情況下變更、中斷或消失。我們建議僅使用下列文件中的公開 API。

Sass 參考

變數

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

名稱類型預設值描述
$primary-color null

修補程式，修正問題 #12080

混合

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

add-foundation-colors

@include add-foundation-colors;

將 $foundation-palette 地圖中的顏色轉移到變數中，例如 $primary-color 和 $secondary-color。在設定檔的「全域」區段下方呼叫此混合，以適當地遷移您的程式碼庫。

flex

@include flex;

透過將 display: flex 加入元件，來啟用彈性盒狀模型。

flex-align

@include flex-align($x, $y);

水平或垂直對齊彈性容器內的項目。

參數類型預設值描述
$x 關鍵字 null

要使用的水平對齊。可以是 left、right、center、justify 或 spaced。或者，將其設定為 null（預設值）以不設定水平對齊。
$y 關鍵字 null

要使用的垂直對齊。可以是 top、bottom、middle 或 stretch。或者，將其設定為 null（預設值）以不設定垂直對齊。

flex-align-self

@include flex-align-self($y);

垂直對齊彈性列中的單一欄位。將此混合套用至彈性欄位。

參數類型預設值描述
$y 關鍵字 null

要使用的垂直對齊。可以是 top、bottom、middle 或 stretch。或者，將其設定為 null（預設值）以不設定垂直對齊。

flex-order

@include flex-order($order);

變更彈性子項目的來源順序。數字較小的子項目會先在版面中顯示。

參數類型預設值描述
$order 數字 0

要套用的順序號碼。

flex-direction

@include flex-direction($direction);

變更彈性方向

參數類型預設值描述
$direction 關鍵字 row

要使用的彈性方向。可以是

  • row（預設值）：與文字方向相同
  • row-reverse：與文字方向相反
  • column：與 row 相同，但由上至下
  • column-reverse：與 row-reverse 相同，由上至下

函式

color-luminance

color-luminance($color)

檢查 $color 的亮度。

參數類型預設值描述
$color 顏色 無

要檢查其亮度的顏色。

色彩對比

color-contrast($color1, $color2)

檢查兩個顏色的對比度。

參數類型預設值描述
$color1 顏色 無

第一個要比較的顏色。
$color2 顏色 無

第二個要比較的顏色。

color-pick-contrast

color-pick-contrast($base, $colors, $tolerance)

檢查 $base 的亮度，並從 $colors（顏色清單）中傳回對比度最高的顏色。

參數類型預設值描述
$base 顏色 無

要檢查亮度的顏色。
$colors 清單 $white
$black

要比較的顏色。
$tolerance 數字 $global-color-pick-contrast-tolerance

對比度容差。

smart-scale

smart-scale($color, $scale, $threshold)

縮放顏色，如果顏色較淺，則變深；如果顏色較深，則變淺。使用此函式根據顏色的亮度調整色調。

參數類型預設值描述
$color 顏色 無

要縮放的顏色。
$scale 百分比 5%

向上或向下縮放的量。
$threshold 百分比 40%

要檢查的亮度閾值。

get-color

get-color($color)

從基礎調色盤取得顏色

參數類型預設值描述
$color key 無

基礎調色盤中的 key

direction-opposite

direction-opposite($dir)

傳回 $dir 的相反方向

參數類型預設值描述
$dir 關鍵字 無

「上」、「右」、「下」和「左」之間使用的方向。

gcd

gcd($a, $b)

找出兩個整數的最大公因數。

參數類型預設值描述
$a 數字 無

第一個要比較的數字。
$b 數字 無

第二個要比較的數字。

pow

pow($base, $exponent)

處理小數指數，嘗試將其轉換為分數，然後使用 n 次方根演算法進行計算的一部分

參數類型預設值描述
$base 數字 無

基底數字。
$exponent 數字 無

指數。

ratio-to-percentage

ratio-to-percentage($ratio)

根據給定的比例計算高度為寬度的百分比。

參數類型預設值描述
$ratio 清單 無

用於計算高度的比例，格式為 x by y。

zf-parse-fraction

zf-parse-fraction($fraction)

將給定的 $fraction 解析為分子和分母。

參數類型預設值描述
$fraction * 無

代表要解析的分數的值。可以格式化為 50%、1 of 2、1/2 或 50（不會傳回分母）。

zf-is-fraction

zf-is-fraction($value, $allow-no-denominator)

傳回給定的 $value 是否代表分數。支援 50%、1 of 2、1 per 2 或 1/2 等格式。

參數類型預設值描述
$value * 無

要測試的值。
$allow-no-denominator 布林值 false

如果為 true，則支援沒有分母的簡單數字，例如 50。

fraction-to-percentage

fraction-to-percentage($fraction, $denominator)

從給定的分數計算百分比。

參數類型預設值描述
$fraction 數字或清單 無

代表要使用來計算百分比的分數的值，格式為 50（相對於 $denominator）、50%、1 of 2 或 1/2。
$denominator 數字或清單 無

當 $fraction 表示絕對值時，用作分母的預設值。

divide

divide($divident, $divisor, $precision)

將給定的 $divident 除以給定的 $divisor。

參數類型預設值描述
$divident 數字 無

被除數。
$divisor 數字 無

除數。
$precision 數字 無

除法的精確度小數。

text-inputs

text-inputs($types, $modifier)

產生一個包含所有文字輸入類型的選取器。您也可以過濾清單，只輸出這些選取器的一個子集。

參數類型預設值描述
$types 清單或關鍵字

要使用的文字輸入類型清單。留空以使用所有類型。
$modifier 關鍵字 ''

要套用至每個文字輸入類型的修改器 (例如類別或偽類別)。留空以忽略。

font-stack

font-stack($stack, $map)

從地圖回傳一個字型堆疊清單。等於 map-safe-get($name, $-zf-font-stack)。

參數類型預設值描述
$stack 字串 無

字型堆疊的名稱。
$map 地圖 $-zf-font-stack

字型堆疊的地圖，用於擷取清單。

strip-unit

strip-unit($num)

從值中移除單位 (例如 px、em、rem)，只回傳數字。

參數類型預設值描述
$num 數字 無

要移除單位的數字。

rem-calc

rem-calc($values, $base)

將一個或多個像素值轉換成相符的 rem 值。

參數類型預設值描述
$values 數字或清單 無

要轉換的一個或多個值。請務必用空格分隔，而不是逗號。如果您需要轉換逗號分隔的清單，請用括號將清單括起來。
$base 數字 null

計算 rem 時要使用的基礎值。如果您開箱即用 Foundation，則為 16px。如果這個參數為 null，函數會參考 $global-font-size 變數作為基礎。

unitless-calc

unitless-calc($value, $base)

根據給定的字型大小，將像素、百分比、rem 或 em 值轉換成無單位值。非常適合計算無單位行高。

參數類型預設值描述
$value 數字 無

要轉換為無單位行高的值
$base 數字 無

用於計算行高的字型大小 - 預設為 $global-font-size

has-value

has-value($val)

以 CSS 術語判斷值是否為假值。假值為 null、none、帶有任意單位的 0 或空清單。

參數類型預設值描述
$val 混合 無

要檢查的值。

get-side

get-side($val, $side)

判斷填充、邊界等屬性上的上/右/下/右值，無論傳入多少值。如果您需要知道值的特定面，但不知道該值是否使用簡寫格式，請使用此函數。

參數類型預設值描述
$val 清單或數字 無

要分析的值。應為簡寫大小屬性，例如「1em 2em 1em」
$side 關鍵字 無

要傳回的面。應為 top、right、bottom 或 left。

get-border-value

get-border-value($val, $elem)

給定邊界 $val，找出邊界的特定元素，即 $elem。$elem 的可能值為寬度、樣式和顏色。

參數類型預設值描述
$val 清單 無

要找出值的邊界值。
$elem 關鍵字 無

要萃取的邊界組成部分。

map-deep-get

map-deep-get($map, $keys...)

在巢狀映射中找出值。

深入了解： 映射中的深入取得/設定

參數類型預設值描述
$map 地圖 無

要從中提取值的映射。
$keys... 字串 無

在尋找值時要使用的金鑰。

map-to-list

map-to-list($map)

將映射轉換為清單。

深入了解：

參數類型預設值描述
$map 地圖 無

要從中提取值的映射。

zf-str-join

zf-str-join($str1, $str1, $delimiter)

傳回兩個給定字串 $str1 和 $str2 的連接。如果兩個字串不為空，則以 $delimiter 分隔。

參數類型預設值描述
$str1 字串 null

要連接的第一個字串。
$str1 字串 null

要連接的第二個字串。
$delimiter 字串 null

$str1 和 $str2 之間的分隔符號。

map-safe-get

map-safe-get($map, $key)

安全地從映射中傳回值。

參數類型預設值描述
$map 地圖 無

要從中擷取值的映射。
$key 字串 無

映射金鑰的名稱。