自拍偷在线精品自拍偷,亚洲欧美中文日韩v在线观看不卡

用5個(gè)示例理解 CSS 變量

作者：前端小智
開(kāi)發(fā) 前端
CSS 變量不是靈丹妙藥。它們不會(huì)解決我們?cè)贑SS領(lǐng)域中遇到的所有問(wèn)題。但是，它可以讓我們的代碼更具可讀性和可維護(hù)性。

[[401347]]

隨著 Web應(yīng)用程序變得越來(lái)越大，CSS變得越來(lái)越大，越來(lái)越冗長(zhǎng)，而且混亂不堪。在良好的上下文中使用CSS變量，可為我們提供重用和輕松更改重復(fù)出現(xiàn)的CSS屬性的機(jī)制。

在純CSS支持變量之前，我們有像Less和Sass這樣的預(yù)處理程序。但是它們需要在使用前進(jìn)行編譯，因此(有時(shí))增加了一層額外的復(fù)雜性。

如何定義和使用CSS變量(也稱(chēng)為自定義屬性)

要聲明一個(gè)簡(jiǎn)單的 JS 變量，很簡(jiǎn)單，如下所示：

  1. let myColor = "green"; 

要聲明一個(gè)CSS變量，必須在該變量的名字前添加兩個(gè)橫線。

  1. body { 
  2.     --english-green-color: #1B4D3E; 
  3. } 

現(xiàn)在，為了使用CSS變量的值，我們可以使用var(...)函數(shù)。

  1. .my-green-component{ 
  2.     background-color: var(--english-green-color); 
  3. } 

管理CSS變量的最簡(jiǎn)單方法是將它們聲明在:root偽類(lèi)中。鑒于CSS變量與其他CSS定義一樣都遵循規(guī)則，因此將它們放在:root中將確保所有選擇器都可以訪問(wèn)這些變量。

  1. :root{ 
  2.     --english-green-color: #1B4D3E; 
  3. } 

覽器對(duì)CSS變量的支持情況

瀏覽器對(duì)CSS變量的支持一點(diǎn)也不差。如果查看 Can I Use CSS Variables 那會(huì)發(fā)現(xiàn)所有主流瀏覽器都支持CSS變量。無(wú)論是在移動(dòng)設(shè)備還是 PC 上。

現(xiàn)在，讓我們看看這些CSS變量的實(shí)際作用。

示例1-管理顏色

使用CSS變量的最佳選擇之一就是設(shè)計(jì)的顏色。不必一遍又一遍地復(fù)制和粘貼相同的顏色，我們只需將它們放在變量中即可。

如果有該死的產(chǎn)品要我們更新特定的綠色陰影或?qū)⑺邪粹o設(shè)置為紅色而不是藍(lán)色，則只需更改該CSS變量的值即可。我們無(wú)需搜索并替換所有出現(xiàn)的該顏色。

動(dòng)手試試：https://codesandbox.io/s/8kkyl4mlm9?from-embed

示例2-刪除重復(fù)的代碼

通常我們需要構(gòu)建一些組件的不同變體。相同的基本樣式，只是功能略有不同。我們舉例使用一個(gè)帶有不同顏色按鈕的案例。

  1. .btn { 
  2.   border: 2px solid black; 
  3.   // more props here 
  4. } 
  5.  
  6. .btn:hover { 
  7.   background: black; 
  8.   // more props here 
  9. } 
  10.  
  11. .btn.red { 
  12.   border-color: red 
  13. } 
  14. .btn.red:hover { 
  15.   background: red 
  16. } 

像這樣使用它們：

  1. <button class="btn">Hello</button> 
  2. <button class="btn red">Hello</button> 

但是，這會(huì)增加一些代碼重復(fù)。在.red類(lèi)中，我們必須將邊框顏色和背景都設(shè)置為紅色。萬(wàn)一哪天需要更改顏色，那就很麻煩了，需要一個(gè)一個(gè)的改。這個(gè)問(wèn)題可以通過(guò)CSS變量輕松解決。

  1. .btn { 
  2.     border: 2px solid var(--color, black); 
  3. } 
  4. .btn:hover { 
  5.     background: var(--color, black); 
  6. } 
  7. .btn.red { 
  8.     --color: red 
  9. } 

 

動(dòng)手試試：https://codesandbox.io/s/yp29qoyvyx?from-embed=&file=/base.css

示例3-使某些屬性易于閱讀

如果我們想為更復(fù)雜的屬性值創(chuàng)建快捷方式，那么CSS 變量非常有用，這樣我們就不必記住它了。

CSS屬性，如box-shadow、transform和font或其他具有多個(gè)參數(shù)的CSS規(guī)則就是很好的例子。

我們可以將屬性放在一個(gè)變量中，這樣我們就可以通過(guò)更易于閱讀的格式重用它。

  1. // 主要代碼 
  2. :root { 
  3.   --tiny-shadow: 4px 4px 2px 0 rgba(0, 0, 0, 0.8); 
  4.   --animate-right: translateX(20px); 
  5. } 
  6. li { 
  7.   box-shadow: var(--tiny-shadow); 
  8. } 
  9. li:hover { 
  10.   transform: var(--animate-right); 
  11. } 

動(dòng)手試試：https://codesandbox.io/s/q3ww1znxn9?from-embed=&file=/css_vars.css:0-187

示例4-級(jí)聯(lián)變量

標(biāo)準(zhǔn)級(jí)聯(lián)規(guī)則也適用于CSS變量。如果一個(gè)自定義屬性被聲明多次，css文件中最下面的定義將覆蓋它上面的定義。

下面的示例演示了在用戶操作上動(dòng)態(tài)操作屬性是多么容易，同時(shí)也保持代碼的清晰和簡(jiǎn)潔。

  1. // 主要代碼 
  2. .orange-container { 
  3.   --main-text: 18px; 
  4. } 
  5. .orange-container:hover { 
  6.   --main-text: 22px; 
  7. } 
  8. .red-container:hover { 
  9.   --main-text: 26px; 
  10. } 
  11. .title { 
  12.   font-size: var(--title-text); 
  13. } 
  14. .content { 
  15.   font-size: var(--main-text); 
  16. } 
  17.  
  18. .container:hover { 
  19.   --main-text: 18px; 
  20. } 

 圖片

動(dòng)手試試：https://codesandbox.io/s/xj0qxn2l7w?from-embed=&file=/index.html

示例5 -主題切換與CSS變量

CSS變量的一大優(yōu)點(diǎn)是它們的響應(yīng)特性。一旦我們更新它們，具有CSS變量值的任何屬性也會(huì)被更新。因此，僅需使用幾行Javascript并巧妙地使用CSS變量，便可以創(chuàng)建主題切換器機(jī)制。

圖片

動(dòng)手試試：https://codesandbox.io/s/24j4m8y5kn?from-embed=&file=/scripts.js

擴(kuò)展

就像CSS中幾乎所有東西一樣，變量也非常簡(jiǎn)單易用。以下是一些未包含在示例中的技巧，但在某些情況下仍然非常有用：

注意大寫(xiě)，CSS變量區(qū)分大小寫(xiě)

  1. :root { 
  2.  --color: blue; 
  3.  --COLOR: red; 
  4. } 
  5. /*--color and --COLOR are two different variables*/ 

當(dāng)我們使用var()函數(shù)時(shí)，還可以傳入第二個(gè)參數(shù)。如果找不到自定義屬性，則將使用此值：

  1. width: var(--custom-width, 33%); 

可以將CSS變量直接用于HTML

  1. <!--HTML--> 
  2. <html style="--size: 600px"> 

  1. body { 
  2.   max-width: var(--size) 
  3. } 

可以在其他CSS變量中使用CSS變量：

  1. --base-red-color: #f00; 
  2. --background-gradient: linear-gradient(to top, var(--base-red-color), #222); 

可以通過(guò)媒體查詢(xún)將CSS變量作為條件。例如，以下代碼根據(jù)屏幕大小更改 padding 的值：

  1. :root { 
  2.     --padding: 15px  
  3. } 
  4.  
  5. @media screen and (min-width: 750px) { 
  6.     --padding: 30px 
  7. } 

在calc()函數(shù)中也可以使用CSS變量。

  1. --text-input-width: 5000px; 
  2. max-width: calc(var(--text-input-width) / 2); 

CSS 變量不是靈丹妙藥。它們不會(huì)解決我們?cè)贑SS領(lǐng)域中遇到的所有問(wèn)題。但是，它可以讓我們的代碼更具可讀性和可維護(hù)性。

而且，它們極大地提高了跨大型文檔進(jìn)行更改的便利性。只需將所有常量設(shè)置在一個(gè)單獨(dú)的文件中，當(dāng)我們只想對(duì)變量進(jìn)行更改時(shí)，就不必跳過(guò)數(shù)千行代碼。

作者：Danie 譯者：前端小智 來(lái)源：stackabuse原文：http://www.js-craft.io/blog/17-3-examples-of-using-css-variables/

 

責(zé)任編輯：姜華 來(lái)源： 大遷世界
CSSCSS 變量Web應(yīng)用
相關(guān)推薦

2013-10-18 10:11:10

AngularJS項(xiàng)目

2020-09-07 08:29:03

CSS 函數(shù)JavaScript

2011-08-02 14:45:11

HTML 5

2011-07-15 09:10:44

HTML 5CSS3

2009-12-03 13:50:16

PHP5異常處理

2024-04-24 11:05:03

MapReduce編程大數(shù)據(jù)

2011-11-18 13:25:48

HTML 5

2021-12-06 13:59:20

邊緣計(jì)算互聯(lián)網(wǎng)5G

2010-03-18 16:17:29

Python 變量類(lèi)型

2024-07-30 11:29:09

2011-08-10 13:44:22

HTML 5

2020-08-01 15:37:19

5G無(wú)線技術(shù)網(wǎng)絡(luò)

2023-03-28 09:58:56

Python變量

2017-01-13 09:54:52

2020-07-24 15:40:51

CSS前端代碼

2018-04-02 11:59:04

Linux命令ln

2020-11-11 07:52:04

CSS功能瀏覽器

2019-04-03 13:00:27

CSSBFC前端

2021-03-17 10:26:49

物聯(lián)網(wǎng)5G數(shù)字化轉(zhuǎn)型

2018-04-16 10:12:46

Linux命令gunzip
點(diǎn)贊
收藏

51CTO技術(shù)棧公眾號(hào)