CSS Podcast - 020:函式
到目前為止,本課程介紹了幾項 CSS 函式。在 grid 模組中,我們介紹了 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()
函式就不會傳回任何內容。
色彩函式
您已大致瞭解 color 模組中的色彩函式。如果你還沒閱讀過這篇文章,強烈建議你設定。
CSS 中部分可用的色彩函式包括 rgb()
、rgba()
、hsl()
、hsla()
、hwb()
、lab()
和 lch()
。這些方法都有類似的形式,會傳入設定引數,並傳回顏色。
數學運算式
CSS 與許多其他程式設計語言一樣,還提供實用的數學函式,協助執行各種類型的計算。
calc()
calc()
函式採用單一數學運算式做為參數。這個數學運算式可以混合使用類型,例如長度、數字、角度和頻率。單位也可以混合。
.my-element {
width: calc(100% - 2rem);
}
在本例中,使用 calc()
函式將元素寬度調整為 100% 的大小,當做包含父項元素的 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()
min()
函式會傳回一或多個傳遞引數的最小值。max()
函式則相反:取得一或多個傳遞引數的最大值。
.my-element {
width: min(20vw, 30rem);
height: max(20vh, 20rem);
}
在這個範例中,寬度應為介於 20vw
之間的最小值,也就是可視區域寬度的 20% 與 30rem
之間的最小值。高度必須是介於 20vh
之間的最大值,也就是可視區域高度的 20% 至 20rem
。
clamp()
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
屬性搭配使用。
旋轉
您可以使用 rotate()
函式旋轉元素,讓元素沿著中心軸旋轉。您也可以使用 rotateX()
、rotateY()
和 rotateZ()
函式,在特定軸上旋轉元素。你可以傳遞角度、轉彎和弧度單位,以決定旋轉等級。
.my-element {
transform: rotateX(10deg) rotateY(10deg) rotateZ(10deg);
}
rotate3d()
函式使用四個引數。
前 3 個引數是數字,分別定義 X、Y 和 Z 座標。第四個引數是旋轉,這點與其他旋轉函式不同,接受度數、角度和轉彎。
.my-element {
transform: rotate3d(1, 1, 1, 10deg);
}
規模
您可以使用 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 縮放比例係數。
Google 翻譯
translate()
函式會移動元素,同時維持元素在文件流程中的位置。可接受長度和百分比值做為引數。如果定義一個引數,translate()
函式就會沿著 X 軸翻譯元素;如果同時定義兩個引數,則沿著 X 軸和 Y 軸轉譯元素。
.my-element {
transform: translatex(40px) translatey(25px);
}
和其他轉換函式一樣,您可以使用 translateX
、translateY
和 translateZ
,針對特定軸使用特定函式。您也可以使用 translate3d
,在單一函式中定義 X、Y 和 Z 平移。
傾斜
您可以使用接受角度做為引數的 skew()
函式對元素進行偏差。skew()
函式的運作方式與 translate()
非常類似。如果只定義一個引數,只會影響 X 軸,如果同時定義兩者,X 和 Y 軸會受到影響。您也可以使用 skewX
和 skewY
分別影響每個軸。
.my-element {
transform: skew(10deg);
}
行進方向朝上
最後,您可以使用 perspective
屬性 (屬於轉換系列的一部分) 來變更使用者與 Z 平面之間的距離。這樣可以營造距離的感覺,並可用來在設計中建立景深。
以 David Desandro 為例,在他們的實用文章中,此範例說明瞭如何運用,以及運用 perspective-origin-x
和 perspective-origin-y
屬性打造真正的 3D 體驗。
動畫函式、漸層與濾鏡
CSS 也提供函式,可協助您為元素建立動畫、為元素套用漸層,並使用圖形篩選器操控元素的外觀。為盡可能簡化這個模組,連結模組中已涵蓋相關內容。這些函式的結構與此模組中展示的函式類似。
隨堂測驗
測試您對函式的瞭解程度
哪些字元可識別 CSS 函式?
[]
{}
()
::
:
CSS 是否內建數學函式?
calc()
函式可放置在其他 calc()
中,例如 font-size: calc(10px + calc(5px * 3));
以下何者為 CSS 形狀函式?
ellipse()
square()
circle()
rect()
inset()
polygon()