CSS功能指南

CSS 函數指南：掌控樣式的強大工具

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

更多

在編程中，函數是執行特定任務的一段命名代碼。例如，JavaScript 中一個名為sayWoof()的函數：

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

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

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

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

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

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

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

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

### CSS 函數的基礎知識

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

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

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

CSS filter函數drop-shadow()使用我們提供的參數在應用它的任何內容上創建一個橙色的外發光效果。

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

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

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

常用的CSS 函數

url()

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

使用url()

url()允許你鏈接到其他資源以加載它們。這可以包括圖像、字體，甚至是其他樣式表。出於性能原因，最好限制你通過url()加載的內容，因為每個聲明都是一個額外的HTTP 請求。

#### attr()

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

使用calc()

如果你有一個函數應該花一些時間來試驗，那就是calc() 。我們有一份完整的關於calc()的指南。

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

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

#### lang()

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

使用lang()

在你的HTML 中包含lang屬性是一件非常重要的事情。當它出現在你的HTML 中時，你可以使用lang()函數來定位屬性值的出現，並根據它有條件地應用樣式。

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

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

#### :not()

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

使用not()

此偽類選擇器將選擇任何不是你指定的內容。例如，你可以使用body:not(img)來定位任何不是圖像的內容。雖然此示例非常強大，但將:not()作用域限定為更集中的選擇器（例如BEM 的塊類）可以為你提供很大的多功能性。

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

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