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%
然後移除已計算出的值 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 填充規則做為引數。
如此一來,即可在圖形工具中繪製高度複雜的形狀
再複製到 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 縮放比例係數。
翻譯
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 形狀函式?
circle()
ellipse()
inset()
square()
rect()
polygon()