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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

#### lang()

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

此選擇器的一個常見用途是設置特定於語言的引號，這對於國際化等非常有用。

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

#### :not()

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

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

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