初識css自定義屬性

一隻蔥貝發表於2018-11-13
CSS

這算是一篇兩篇文章譯文的糅合體，旨在幫助理解css自定義屬性。

今天，CSS前處理器是Web開發的標準。 前處理器的一個主要優點是它們使您能夠使用變數， 這有助於您避免複製和貼上程式碼，並簡化了開發和重構。

在本文中，您將瞭解到如何將CSS變數整合到CSS開發工作流程中，這會使得樣式表更易於維護和不重複性。

現在，讓我們開始吧！

1* css變數的語法

<1> 什麼是css變數？

  • 如果您使用過任何一種程式語言，那麼您應該已經熟悉了變數的概念。 變數允許您儲存和更新程式所需的值以便工作。

  • 在CSS中使用變數的好處與在程式語言中使用變數的好處並沒有太大的不同。

  • 以下是規範對此的說法：

[Using CSS variables] makes it easier to read large files, as seemingly-arbitrary values now have informative names, and makes editing such files much easier and less error-prone, as one only has to change the value once, in the custom property, and the change will propagate to all uses of that variable automatically.

W3C Specification.

[使用CSS變數]可以更容易地讀取大檔案，因為看似任意的值現在具有資訊性名稱，並且使得編輯此類檔案更容易且更不容易出錯，因為只需要在自定義屬性中更改一次值 ，這種更改將自動傳播到所有使用該變數的地方。

<2>css自定義變數語法

  • 要宣告變數而不是常用的CSS屬性（如顏色或填充），只需提供以 - - 開頭的自定義命名屬性：

    .box{
  --box-color: #4d4e53;
  --box-padding: 0 10px;
}
複製程式碼

    屬性的值可以是任何有效的CSS值：顏色，字串，佈局值，甚至是表示式。

    以下是一些有用的自定義屬性：

    :root{
  --main-color: #4d4e53;
  --main-bg: rgb(255, 255, 255);
  --logo-border-color: rebeccapurple;

  --header-height: 68px;
  --content-padding: 10px 20px;

  --base-line-height: 1.428571429;
  --transition-duration: .35s;
  --external-link: "external link";
  --margin-top: calc(2vh + 20px);

  /* Valid CSS custom properties can be reused later in, say, JavaScript. */
  --foo: if(x > 5) this.width = 10;
}
複製程式碼

    如果您不確定 :root，在HTML中它與html相同但具有更高的特異性，相當於全域性變數。

<3> css變數的使用

var() 函式

  • 您要通過var（）這個 css 函式來使用 css 變數，將 css 變數名傳入這個函式：

    .box{
  --box-color:#4d4e53;
  --box-padding: 0 10px;

  padding: var(--box-padding);
}

.box div{
  color: var(--box-color);
}

複製程式碼

  • var() 函式的語法是：

    var( <custom-property-name> [, <declaration-value> ]? )

    方法的第一個引數是要替換的自定義屬性的名稱。函式的可選第二個引數用作回退值。如果第一個引數引用的自定義屬性無效，則該函式將使用第二個值。

    如果您不確定是否已定義自定義屬性並且想要提供用作回退的值，則可以執行此操作。

    例如：

    color: var(--foo, red, blue); //將red, blue同時指定為回退值；即是說任何在第一個逗號之後到函式結尾前的值都會被考慮為回退值。

padding: var(--box-padding, var(--main-padding));
複製程式碼
calc()函式

  • 由於我們習慣使用前處理器和其他語言，我們希望在處理變數時能夠使用基本運算子。 為此，CSS提供了一個calc（）函式，它使瀏覽器在對自定義屬性的值進行任何更改後重新計算表示式：

    :root{
  --indent-size: 10px;

  --indent-xl: calc(2*var(--indent-size));
  --indent-l: calc(var(--indent-size) + 2px);
  --indent-s: calc(var(--indent-size) - 2px);
  --indent-xs: calc(var(--indent-size)/2);
}
複製程式碼

  • 如果您嘗試使用無單位值，則使用calc()函式可以帶來很大的方便：

    :root{
  --spacer: 10;
}

.box{
  padding: var(--spacer)px 0; /* DOESN'T work */
  padding: calc(var(--spacer)*1px) 0; /* WORKS */
}
複製程式碼
css自定義屬性的scop

2* 利用js使用css自定義屬性

假設您有一個名為 --left-pos 的 CSS 變數，其值為 100px，範圍為 CSS 文件中的 .sidebar 類：

.sidebar {
--left-pos: 100px;
}
複製程式碼

可以通過如下方式獲取 --left-pos 的值：

const sidebarElement = document.querySelector('.sidebar');

const cssStyles = getComputedStyle(sidebarElement);

const cssVal = String(cssStyles.getPropertyValue('--left-pos')).trim();

console.log(cssVal); //100px
複製程式碼

設定css屬性值：

sidebarElement.style.setProperty('--left-pos', '200px');
複製程式碼

3* css 變數和預處理變數有什麼不同？

在樣式化網站時，您可能通過使用Sass和Less等前處理器來使得變數的更具有靈活性。

前處理器允許您設定變數，並在函式，迴圈，數學運算等中使用它們。這是否意味著CSS變數無關緊要？

不完全是，主要是因為CSS變數與前處理器變數不同。

差異源於CSS變數是在瀏覽器中執行的真正的CSS屬性，而前處理器變數需要被編譯成常規CSS程式碼，因此瀏覽器對它們一無所知。

這意味著您可以更新樣式表文件中的CSS變數，內聯樣式屬性和SVG表示屬性，或者選擇使用JavaScript動態操作它們。對於 CSS 自定義屬性的修改，會立馬傳遞到使用到他的地方，而前處理器則無法完成這種行為，因為他們是提前已經編譯好了的！

這並不是說你需要在一個或另一個之間做出選擇：沒有什麼能阻止你利用CSS和前處理器變數一起工作的超能力。

Last

參考連結

  1. It's Time To Start Using CSS Custom Properties：www.smashingmagazine.com/2017/04/sta…
  2. A Practical Guide to CSS Variables ：www.sitepoint.com/practical-g…

撒花～

歡迎關注公眾號：CSandCatti，集合英語和前端知識於一身的公眾號平臺～

相關文章