CSS 函數(shù)指南：掌控樣式的強(qiáng)大工具

如同其他編程語(yǔ)言一樣，CSS 也擁有函數(shù)。這些函數(shù)可以插入到值的位置，或在某些情況下，伴隨另一個(gè)值聲明使用。一些 CSS 函數(shù)甚至允許你嵌套其他函數(shù)！

function sayWoof() {
? console.log("Woof!");
}

我們可以在定義所需行為后，在代碼的后面使用此函數(shù)。在這個(gè)例子中，任何時(shí)候你在你的網(wǎng)站或 Web 應(yīng)用的 JavaScript 中鍵入 sayWoof()，它都會(huì)將“Woof!”打印到瀏覽器的控制臺(tái)。

函數(shù)也可以使用參數(shù)，這些參數(shù)是用于數(shù)字或文本片段的槽位，你可以將它們輸入函數(shù)的邏輯中以修改它們。在 JavaScript 中，它是這樣工作的：

function countDogs(amount) {
? console.log("There are "   amount   " dogs!");
}

這里，我們有一個(gè)名為 countDogs() 的函數(shù)，它有一個(gè)名為 amount 的參數(shù)。當(dāng)為 amount 提供一個(gè)數(shù)字時(shí)，它將獲取該數(shù)字并將其添加到預(yù)先指定的句子中。這使我們能夠創(chuàng)建告訴我們我們統(tǒng)計(jì)了多少條狗的句子。

countDogs(3); // There are 3 dogs!
countDogs(276); // There are 276 dogs!
countDogs("many"); // There are many dogs!

一些編程語(yǔ)言自帶內(nèi)置函數(shù)，以幫助你避免為每個(gè)新項(xiàng)目重新發(fā)明輪子。通常，這些函數(shù)旨在幫助更輕松地使用該語(yǔ)言的主要優(yōu)勢(shì)和功能。

例如，庫(kù)。庫(kù)是由精心挑選的函數(shù)集合組成的代碼集合，旨在幫助加快和簡(jiǎn)化開發(fā)——例如 FitVids.js，用于創(chuàng)建靈活的視頻元素。

### CSS 函數(shù)的基礎(chǔ)知識(shí)

與其他編程語(yǔ)言不同，我們不能在 CSS 中創(chuàng)建我們自己的函數(shù)。這種邏輯保留給 CSS 選擇器，它允許你創(chuàng)建強(qiáng)大的條件樣式規(guī)則。

與其他編程語(yǔ)言不同——其他編程語(yǔ)言中函數(shù)的輸出通常會(huì)隱式地影響后續(xù)的邏輯——CSS 函數(shù)的輸出本質(zhì)上是可視的。此輸出用于控制內(nèi)容的布局和演示。例如：

.has-orange-glow {
  filter: drop-shadow(0.25rem 0 0.75rem #ef9035);
}

CSS filter 函數(shù) drop-shadow() 使用我們提供的參數(shù)在應(yīng)用它的任何內(nèi)容上創(chuàng)建一個(gè)橙色的外發(fā)光效果。

在下面的演示中，我有一個(gè)名為 toggleOrangeGlow 的 JavaScript 函數(shù)，它在 CSS-Tricks 徽標(biāo)上切換 .has-orange-glow 類的應(yīng)用。將其與 CSS 過渡結(jié)合使用，我們可以創(chuàng)建一個(gè)很酷的發(fā)光效果：

你可能熟悉一些 CSS 函數(shù)，但該語(yǔ)言有一個(gè)令人驚訝的廣泛列表！

與 Web 上的任何其他技術(shù)一樣，不同的 CSS 函數(shù)具有不同的瀏覽器支持級(jí)別。確保你進(jìn)行研究和測(cè)試以確保你的體驗(yàn)對(duì)每個(gè)人都有效，并使用諸如 @supports 之類的東西來提供高質(zhì)量的替代體驗(yàn)。

常用的 CSS 函數(shù)

url()

.el {
  background: url(/images/image.jpg);
}

#### attr()

/* <div data-example="foo"> */
div {
  content: attr(data-example);
}
<p><details><summary>
使用 <code>attr()</code>      </summary><p>此函數(shù)允許我們進(jìn)入 HTML，獲取屬性的內(nèi)容，并將其提供給 CSS <code>content</code> 屬性。你通常會(huì)看到 <code>attr()</code> 用于打印樣式表中，它用于在鏈接文本后顯示鏈接的 URL。此函數(shù)的另一個(gè)很好的應(yīng)用是，如果圖像加載失敗，則使用它來顯示圖像的替代說明。</p></details></p>
<p>#### <code>calc()</code></p>
<pre class="brush:php;toolbar:false">.el {
  width: calc(100vw - 80px);
}

此函數(shù)接受兩個(gè)參數(shù)，并根據(jù)你提供的運(yùn)算符 ( , -, *, /) 計(jì)算結(jié)果，前提是這些參數(shù)是有或沒有伴隨單位的數(shù)字。

與 Sass 等 CSS 預(yù)處理器不同，calc() 可以混合單位，這意味著你可以做一些事情，例如從 100% 中減去 6rem。calc() 也是動(dòng)態(tài)更新的，因此如果 100% 代表寬度，那么如果該寬度發(fā)生變化，它仍然有效。calc() 也可以接受 CSS 自定義屬性作為參數(shù)，這為你提供了令人難以置信的靈活性。

#### lang()

p:lang(en) {
  quotes: "\201C" "\201D" "\2018" "\2019" "\201C" "\201D" "\2018" "\2019";
}

此選擇器的一個(gè)常見用途是設(shè)置特定于語(yǔ)言的引號(hào)，這對(duì)于國(guó)際化等非常有用。

聰明的設(shè)計(jì)師和開發(fā)人員也可能將其用作樣式翻譯版本的網(wǎng)站的鉤子，其中文化和/或語(yǔ)言方面的考慮意味著對(duì)負(fù)空間等事物的看法有所不同。

#### :not()

h3:not(:first-child) {
  margin-top: 0;
}

目前，:not() 只支持一個(gè)選擇器作為其參數(shù)，但是正在開發(fā)對(duì)多個(gè)逗號(hào)分隔的參數(shù)的支持（例如 div:not(.this, .that)）！

等等，更多函數(shù)介紹請(qǐng)參考原文。 由于篇幅限制，此處省略了原文中剩余的大量CSS函數(shù)介紹。 請(qǐng)參考原文獲取完整信息。