函式

CSS Podcast - 020: Functions

到目前為止，您在本課程中已經接觸過幾個 CSS 函式。在「格線」單元中，您已瞭解 minmax() 和 fit-content()，這兩者可協助您設定元素大小。在「color」模組中，您已瞭解 rgb() 和 hsl()，可協助您定義顏色。

與許多其他程式設計語言一樣，CSS 有許多內建函式，可供您隨時存取。

每個 CSS 函式都有特定用途，在本課程中，您將獲得概略的總覽，進一步瞭解如何使用這些函式。

什麼是函數？

函式是完成特定工作的命名式獨立程式碼。函式會命名，方便您在程式碼中呼叫函式，並將資料傳入函式。這就是所謂的傳遞引數。

許多 CSS 函式都是純函式，也就是說，如果您將相同的引數傳遞至這些函式，無論程式碼的其餘部分發生什麼事，這些函式都會一律傳回相同的結果。這些函式通常會在 CSS 中的值變更時重新計算，類似於該語言中的其他元素，例如 currentColor 等計算的層疊值。

在 CSS 中，您只能使用提供的函式，而不能自行編寫函式，但在某些情況下，函式可彼此巢狀，讓函式更具彈性。我們會在本單元後續部分進一步說明。

功能選取器

.post :is(h1, h2, h3) {
    line-height: 1.2;
}

您已在擬類別模組中瞭解函式選取器，其中詳細說明 :is() 和 :not() 等函式。傳遞至這些函式的引數是 CSS 選取器，系統會對其進行評估。如果找到符合的元素，系統會將其餘的 CSS 規則套用至這些元素。

自訂屬性和 var()

:root {
    --base-color: #ff00ff;
}

.my-element {
    background: var(--base-color);
}

自訂屬性是一種變數，可讓您在 CSS 程式碼中將值切割成符記。自訂屬性也會受到連鎖影響，也就是說，這些屬性可根據內容進行操作或重新定義。自訂屬性必須在開頭加上兩個破折號 (--)，且區分大小寫。

var() 函式會接收一個必要引數：您嘗試以值傳回的自訂屬性。在上述程式碼片段中，var() 函式會將 --base-color 做為引數傳遞。如果已定義 --base-color，var() 就會傳回該值。

.my-element {
    background: var(--base-color, hotpink);
}

您也可以將備用宣告值傳遞至 var() 函式。也就是說，如果找不到 --base-color，系統會改用傳遞的宣告，在本範例中就是 hotpink 顏色。

傳回值的函式

var() 函式只是其中一個會傳回值的 CSS 函式。attr() 和 url() 等函式採用與 var() 相似的結構，您可以傳遞一或多個引數，並在 CSS 宣告的右側使用這些引數。

a::after {
  content: attr(href);
}

此處的 attr() 函式會擷取 <a> 元素的 href 屬性內容，並將其設為 ::after 擬元素的 content。如果 <a> 元素的 href 屬性值有所變更，系統會自動在這個 content 屬性中反映這項變更。

.my-element {
    background-image: url('/path/to/image.jpg');
}

url() 函式會採用 字串網址，用於載入圖片、字型和內容。如果未傳入有效網址，或找不到網址所指向的資源，url() 函式就不會傳回任何內容。

色彩函式

您已在「顏色」單元中瞭解顏色函式。如果您尚未閱讀該文章，強烈建議您閱讀。

CSS 中可用的部分色彩函式包括 rgb()、rgba()、hsl()、hsla()、hwb()、lab() 和 lch()。這些函式都具有類似的形式，會傳入設定引數，並傳回顏色。

數學運算式

與許多其他程式設計語言一樣，CSS 提供實用的數學函式，可協助執行各種運算。

calc()

Browser Support

• 26
• 12
• 16
• 7

Source

calc() 函式會使用單一數學運算式做為參數。這個數學運算式可混合長度、數字、角度和頻率等類型。您也可以混合使用不同單位。

.my-element {
    width: calc(100% - 2rem);
}

在這個範例中，calc() 函式會用來將元素的寬度設為包含它的父項元素的 100%，然後從該計算值中移除 2rem。

:root {
  --root-height: 5rem;
}

.my-element {
  width: calc(calc(10% + 2rem) * 2);
  height: calc(var(--root-height) * 3);
}

calc() 函式可在其他 calc() 函式中巢狀。您也可以在 var() 函式中傳遞自訂屬性，做為運算式的一部分。

min()和max()

Browser Support

• 79
• 79
• 75
• 11.1

Source

min() 函式會傳回一或多個傳入引數中，計算值最小的值。max() 函式則相反，會取得一或多個傳入引數中最大的值。

.my-element {
  width: min(20vw, 30rem);
  height: max(20vh, 20rem);
}

在這個範例中，寬度應為 20vw (等於 可視區域寬度的 20%) 和 30rem 之間最小值。高度應為 20vh (等於 可視區域高度的 20%) 和 20rem 之間的最大值。

注意： 我們會在「大小」單元中介紹 vw 和 vh 等單位。

clamp()

Browser Support

• 79
• 79
• 75
• 13.1

Source

clamp() 函式會使用三個引數：最小大小、理想大小和最大大小。

h1 {
  font-size: clamp(2rem, 1rem + 3vw, 3rem);
}

在本例中，font-size 會根據檢視區寬度調整為流動式。vw 單位會新增至 rem 單位，以協助縮放螢幕，因為無論縮放等級為何，vw 單位都會維持相同大小。乘上 rem 單位 (以根字型大小為準)，可為 clamp() 函式提供相對計算點。

如要進一步瞭解 min()、max() 和 clamp() 函式，請參閱這篇文章。

形狀

clip-path、offset-path 和 shape-outside CSS 屬性會使用形狀來視覺剪輯方塊，或提供形狀讓內容流動。

有幾種形狀函式可用於這兩種屬性。簡單形狀 (例如 circle()、ellipse() 和 inset()) 會使用設定引數來調整大小。較複雜的形狀 (例如 polygon()) 會使用以半形符號分隔的 X 軸和 Y 軸值組合，建立自訂形狀。

.circle {
  clip-path: circle(50%);
}

.polygon {
  clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%);
}

和 polygon() 一樣，也有 path() 函式，可將 SVG 填充規則做為引數。這樣一來，您就能在 Illustrator 或 Inkscape 等圖形工具中繪製高度複雜的形狀，然後複製到 CSS 中。

轉換

最後，在這個 CSS 函式總覽中，我們將介紹轉換函式，這個函式會扭曲、調整大小，甚至變更元素的深度。下列所有函式都會與 transform 屬性搭配使用。

旋轉

Browser Support

• 1
• 12
• 3.5
• 3.1

Source

您可以使用 rotate() 函式旋轉元素，該函式會沿著元素的中心軸旋轉元素。您也可以使用 rotateX()、rotateY() 和 rotateZ() 函式，在特定軸上旋轉元素。您可以傳遞角度、轉度和弧度單位，以決定旋轉的程度。

.my-element {
  transform: rotateX(10deg) rotateY(10deg) rotateZ(10deg);
}

rotate3d() 函式會採用四個引數。

Browser Support

• 12
• 12
• 10
• 4

Source

前 3 個引數是數字，用來定義 X、Y 和 Z 座標。第四個引數是旋轉，與其他旋轉函式一樣，可接受度數、角度和轉數。

.my-element {
  transform: rotate3d(1, 1, 1, 10deg);
}

規模

Browser Support

• 1
• 12
• 3.5
• 3.1

Source

您可以使用 transform 和 scale() 函式變更元素的縮放比例。這個函式會接受一或兩個數字做為值，用來決定正向或反向縮放。如果您只定義一個數字引數，X 軸和 Y 軸都會以相同比例縮放，且同時定義兩者是 X 和 Y 的縮寫。就像 rotate() 一樣，scaleX()、scaleY() 和 scaleZ() 函式可用於在特定軸上縮放元素。

.my-element {
  transform: scaleX(1.2) scaleY(1.2);
}

與 rotate 函式一樣，也有 scale3d() 函式。這與 scale() 類似，但會採用三個引數：X、Y 和 Z 縮放比例係數。

翻譯

Browser Support

• 1
• 12
• 3.5
• 3.1

Source

translate() 函式會移動元素，同時維持元素在文件流中的順序。可接受長度和百分比值做為引數。如果已定義一個引數，translate() 函式會沿著 X 軸轉譯元素；如果已定義兩個引數，則會沿著 X 軸和 Y 軸轉譯元素。

.my-element {
  transform: translatex(40px) translatey(25px);
}

您可以使用 translateX、translateY 和 translateZ 等函式，為特定軸使用特定函式，就像使用其他轉換函式一樣。您也可以使用 translate3d，在一個函式中定義 X、Y 和 Z 轉譯。

Skewing

Browser Support

• 1
• 12
• 3.5
• 3.1

Source

您可以使用接受角度做為引數的 skew() 函式，將元素扭曲。skew() 函式的運作方式與 translate() 非常相似。如果只定義一個引數，則只會影響 X 軸，如果同時定義兩個引數，則會影響 X 軸和 Y 軸。您也可以使用 skewX 和 skewY 分別影響每個軸。

.my-element {
  transform: skew(10deg);
}

行進方向朝上

Browser Support

• 36
• 12
• 16
• 9

Source

最後，您可以使用 perspective 屬性 (屬於轉換屬性系列) 來變更使用者與 Z 平面之間的距離。這可營造距離感，並用於在設計中建立景深。

David Desandro 在非常實用的文章中提供這個範例，說明如何使用此屬性，以及如何搭配使用 perspective-origin-x 和 perspective-origin-y 屬性，打造真正的 3D 體驗。

動畫函式、漸層和濾鏡

CSS 也提供函式，可協助您animate、套用漸層，以及使用圖形濾鏡來操控元素的外觀。為讓本單元盡可能簡潔，這些內容已納入連結的單元中。這些函式都採用與本模組中示範函式類似的結構。

進行隨堂測驗

測驗您對函式的瞭解

哪些字元可用來識別 CSS 函式？

[]

這些字元是用於 JavaScript 中的陣列。

{}

這些字元會在 CSS 中包住規則。

()

函式會使用這些字元包裝引數，沒錯！

::

這些字元是 CSS 中的擬造元素。

:

這些字元是 CSS 中的擬造類別。

CSS 是否有內建的數學函式？

是

這些功能非常多，而且我們會在規格和瀏覽器中加入更多功能！

否

請再試一次！

calc() 函式可放置在 calc() 內，例如 font-size: calc(10px + calc(5px * 3));

是

🎉

否

請再試一次！

下列哪些是 CSS 形狀函式？

ellipse()

🎉

square()

請再試一次！

circle()

🎉

rect()

請再試一次！

inset()

🎉

polygon()

🎉