初識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

• 自定義屬性也遵照CSS層疊規則。

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，集合英語和前端知識於一身的公衆號平臺～