CSS變量(自定義屬性)實踐指南_第1頁
CSS變量(自定義屬性)實踐指南_第2頁
CSS變量(自定義屬性)實踐指南_第3頁
CSS變量(自定義屬性)實踐指南_第4頁
CSS變量(自定義屬性)實踐指南_第5頁
全文預(yù)覽已結(jié)束

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進(jìn)行舉報或認(rèn)領(lǐng)

文檔簡介

1、css變量(自定義屬性)實踐指南Sass和Less這樣的預(yù)處理器，讓我們的CSS代碼保持良好的結(jié)構(gòu)和可維護(hù)性。像變量、混合(mixins)、循環(huán)控制等特性，增強(qiáng)了動態(tài)編寫CSS的能力，從而減少重復(fù)代碼，也加快了我們開發(fā)速度。近年來，一些動態(tài)特性開始作為規(guī)范的一部分，出現(xiàn)在CSS語言中。CSS變量(CSSvariables),或者用它的官方稱謂，叫作自定義屬性(customproperties),已經(jīng)可用，并且有非常棒的瀏覽器支持，而CSSmixins也正在取得進(jìn)展。在本文，你將學(xué)會如何使用CSS變量，并把它集成到你的CSS開發(fā)流程中，讓你的樣式表更好維護(hù)，且減少重復(fù)。讓我們現(xiàn)在就開始吧！什么是

2、CSS變量？如果你曾使用過某種編程語言，那么你已經(jīng)很熟悉變量這個概念了。變量用于存儲和更新你的程序所需要的值，以便使它運行。例如，考慮下面的Java代碼Iletnumbed=2;letnumber2=3;lettotal=numbed+number2;console.log(total);/5number1=4;total=numbed+number2;console.log(total);/7nubmer1和number2是兩個變量，分別存儲著數(shù)字2和3。total同樣是變量，存儲著number1與number2之和。在這里它的值就是5。你可以動態(tài)地修改變量里的值，并在程序中使用它們。在上面

3、的代碼中，我把number1的值更新為4，然后再進(jìn)行求和。使用相同的變量，這個時候total里存儲的值就是5，而不再是7了。使用變量的妙處在于，它可以讓你在一個地方存儲值，并且讓你在后面能以各種理由去更新它。在程序中，你不需要為不同的值再添加額外的字符表示：任何值的更新都發(fā)生在同一個地方。正如，在你定義的變量上。CSS在很大程度上是一種聲明式的語言，而缺少動態(tài)能力。你也許會認(rèn)為，讓CSS擁有變量，幾乎讓上面的說法自相矛盾。如果前端開發(fā)僅僅是關(guān)于文字游戲，那可以這么說。幸運的是，Web的編程語言很像生活中的語言，它們會隨著周圍環(huán)境和實踐需要而不斷進(jìn)化與適應(yīng)。CSS也同樣如此。簡單的說，變量已經(jīng)成

4、為CSS世界中激動人心的事實，并且你即將親自看到，對于這個厲害的新技術(shù)，學(xué)習(xí)和使用起來都非常直觀。使用CSS變量有什么好處？使用CSS變量的好處，跟在其他編程語言中使用變量的好處沒什么大的區(qū)別。規(guī)范是這樣描述這一點的使用CSS變量，給看似隨機(jī)的值加上富有信息的名字，從而使得大文件更容易閱讀和編輯，更少出錯。因為，你只需要在自定義屬性中改變一次值，所有應(yīng)用了這個變量的地方都會自動跟著一起改變。W3C規(guī)范換句話說，通過給變量起一個對你來說在項目中有意義的名字，你能更容易的管理和維護(hù)你的代碼。例如，當(dāng)你為項目中的主色調(diào)設(shè)置一個變量名-primary-color，那么你后面再修改這個主色調(diào)時，只需要改

5、動一處，而不需要在不同位置的多個CSS文件中去手動修改多次值。CSS變量和預(yù)處理器中的變量有什么不同？你可能已經(jīng)在CSS預(yù)處理器中嘗試過使用變量而帶來的好處了，比如Sass和Less。你可能已經(jīng)在CSS預(yù)處理器中嘗試過使用變量而帶來的好處了，比如Sass和Less。預(yù)處理器讓你能設(shè)置變量，以及在函數(shù)、循環(huán)、數(shù)學(xué)計算等等地方中使用它們。這是否意味著DSS變量已經(jīng)無關(guān)緊要了呢？那可未必，主要是因為，CSS變量與預(yù)處理器中的變量其實是不同的東西。這些不同基于一個事實：CSS變量是瀏覽器中直接可用的CSS屬性，而預(yù)處理中的變量是用于編譯成常規(guī)的CSS代碼，瀏覽器其實對它們一無所知。這意味著，你可以在樣

6、式表中，在內(nèi)聯(lián)樣式中，在SVG的標(biāo)簽中直接更新CSS變量，甚至可以在運行時用Java直接修改它。而你是無法對預(yù)處理器中的變量做上面這些操作的。CSS變量開啟了一個充滿可能性的新世界大門。不是說你必須要在兩者間做出選擇：沒有什么東西限制你，你可以同時使用CSS變量和預(yù)處理變量，并享有它們各自帶來的巨大好處。CSS變量：語法雖然本文為了簡潔，我使用了CSS變量(CSSvariables)這個稱呼，但官方的規(guī)范把它們稱作作為級聯(lián)變量的CSS自定義屬性(CSScustompropertiesforcascadingvariables)。*CSS自定義屬性(CSScustomproperty)*的部分看

7、起來像這樣：|-my-cool-background:#73a4f4;在自定義屬性前添加雙橫線前綴，然后像給普通CSS設(shè)值一樣，給自定義屬性設(shè)值。在上面的代碼中，我給一個叫做-my-cool-backgroud的自定義屬性設(shè)置了一個顏色值。而級聯(lián)變量(cascadingvariable)的部分，由通過val()來使用你的自定義屬性組成，開起來像這樣：|var(-my-cool-background);自定義屬性作用于CSS選擇器中，val()可被當(dāng)成一個真正的CSS屬性一樣使用。:root-my-cool-background:#73a4f4;/*CSS文件的其他部分*/#foobackgro

8、und-color:var(-my-cool-background);上面的代碼片段把-my-cool-background這個自定義屬性的作用域定義在:root這個偽類中，這讓該自定義屬性能被全局訪問到(即在html標(biāo)簽內(nèi)部的任何地方)。然后，使用val()函數(shù)把ID為foo的容器的background-color設(shè)置為自定義屬性的值，這時該容器就有了淺藍(lán)的背景色。這還沒完。你可以用同樣的淺藍(lán)色，給多個HTML標(biāo)簽的多種可以設(shè)置顏色值的地方設(shè)值，比如設(shè)置它們的color和border-color。方法很簡單，就是通過var(-my-cool-background)拿到自定義屬性的值，然后給合

9、適的CSS屬性設(shè)置上去。(當(dāng)然，在事情變得復(fù)雜之前，我建議思考一下你的CSS變量命名規(guī)范)：|pcolor:var(-my-cool-background);你還可以從通過利用CSS變量獲得另一個CSS變量的值。例如：|-top-color:orange;-bottom-color:yellow;-my-gradient:linear-gradient(var(-top-color),var(-bottom-color);上面的代碼創(chuàng)建了一個-my-gradien變量，是一個漸變樣式，它的值被設(shè)為-top-color的值和-bottom-colo的值組合的結(jié)果?，F(xiàn)在，你可以在任何時候修改你的漸

10、變樣式，僅僅是修改變量的值就可以了，而不再需要在樣式表里滿文件地去找用到這個漸變樣式地方。最后，你可以在CSS變量中加入一個或多個備用值(fallbackvalue/s)，例如:|var(-main-color,#333);上面的代碼中，#333是一個備用值。當(dāng)自定義屬性值無效或未指定(unset)時，如果這時也沒有指定備用值，那么被繼承的(inherited)屬性值將會被使用。承的(inherited)屬性值將會被使用。CSS變量是區(qū)分大小寫的與普通CSS屬性不同，CSS變量是區(qū)分大小寫的。例如，var(-foo)和var(-FOO)是在求兩個不同的自定義屬性值，分別是-foo和-FOO的。

11、CSS變量受級聯(lián)關(guān)系影響和普通CSS屬性一樣，CSS變量是可繼承的。例如，我們定義了一個屬性，值為Dlue:|:root-main-color:blue;當(dāng)你給任意在<html>標(biāo)簽里的元素指定-main-color變量時，它們都會繼承至到blue這個值。當(dāng)你在另一個元素里，為改自定義屬性設(shè)置了一個新值時，那么所有該元素的子元素都會繼承那個新值。例如：|:root-main-color:blue;.alert-main-color:red;pcolor:var(-main-color);<-!HTML-><html><head><!-hea

12、dcodehere-></head><body><div><p>blue的段落</p><divclass="alert"><p>red的段落</p></div></div></bodyx/html>在上面的標(biāo)簽中，第一個p段落會繼承到全局的-main-color值，它是藍(lán)色。在div標(biāo)簽中擁有.alert類的段落會是紅色，因為它的值繼承自局部作用域里的-main-color。知道目前這些規(guī)則差不多夠了。讓我們開始寫代碼吧！如何在SVG中使

13、用CSS變量CSS變量和SVG配合得很好。你可以使用CSS變量去修改SVG中的樣式，以及和呈現(xiàn)相關(guān)的屬性。舉個例子，假設(shè)你想讓你的SVG圖標(biāo)能跟隨其所在父容器而擁有不同的顏色。你可以把CSS變量的作用域限定在父容器中，然后給變量設(shè)置想要的顏色，那么里面的圖標(biāo)就會繼承父容器的顏色值。下面是相關(guān)代碼：I/*inlineSVGsymbolfortheicon*/<svg><symbolid="close-icon"viewbox="00200200"><circlecx="96"cy="96"

14、;r="88"fill="none"stroke="var(-icon-color)"stroke-width="15"/><textx="100"y="160"fill="var(-icon-color)"text-anchor="middle"style="font-size:250px;">x</text></symbol></svg>/*firstinst

15、anceoftheicon*/<svg><usexlink:href="#close-icon"/></svg>上面的代碼使用了<symbol>標(biāo)簽，它讓你創(chuàng)建一SVG圖形的不可見的版本。然后再使用<use>標(biāo)簽生成一個可見的副本。這種方法可以讓你根據(jù)自己的喜好創(chuàng)建任意多個自定義的圖標(biāo)，也就是通過它的D(#close-icon)指向那個<symbol>。這比一遍又一遍地寫重復(fù)的代碼創(chuàng)建圖形更加簡便。如果你想提高這方便的技術(shù)，MassimoCassandro在他的BuildYourOwnSVGIcons中

16、提供了一個快速教程。注意到SVGsymbol中，circle元素里的stroke屬性和text元素里的fill屬性：它們都使用了CSS變量，這里是-iconcolor。它被定義在:rootCSS文件的選擇器中，像這樣：|:root-icon-color:black;這是當(dāng)前圖標(biāo)看起來的樣子：這時，如果你把同樣的SVG圖標(biāo)放在不同的父容器中，并且在父容器上，給你的CSS變量設(shè)置各自的局部值，那么你就會得到不同顏色的圖標(biāo)，并且不用給你的樣式表添加多余的規(guī)則。這很酷！為了展示這一點，我們把同樣的圖標(biāo)放在一個有success類的div里：<!-html-><divclass=&quo

17、t;success"><svg><usexlink:href="#close-icon"/></svg></div>|<!-html-xdivclass="success"><svg><usexlink:href="#close-icon"/></svgx/div>現(xiàn)在，讓-icon-color變量局部化，即把它放在.success中，并設(shè)置一個green值。我們來看看發(fā)生的變化:|/*css*/.success-icon-

18、color:green;這個圖標(biāo)的顏色就變成了綠色：如何在keyframes中使用CSS變量CSS變量可以在CSS動畫中使用，即可用于常規(guī)HTML元素，也可以用于內(nèi)聯(lián)的SVG。只需要記得，你得知道讓什么元素動，把它視為目標(biāo)元素，然后創(chuàng)建對該目標(biāo)元素的選擇器，在選擇器的作用范圍中定義你的DSS變量，然后，使用val()獲取這些變量，把它們設(shè)置至Ukeyframes代碼塊中。例如，讓SVG中.bubble類里面的ellipse元素動起來，你的CSS可能會看起來像這樣：I.bubble-direction-y:30px;-transparency:0;animation:bubbling3sforw

19、ardsinfinite;keyframesbubbling0%transform:translatey(var(-direction-y);opacity:var(-transparency);40%opacity:calc(var(-transparency)+0.2);70%opacity:calc(var(-transparency)+0.1);100%opacity:var(-transparency);注意到這是如何借助CSS的calc(),并用var()函數(shù)進(jìn)行計算的。它們增強(qiáng)了你代碼的靈活性。這個例子簡潔的地方在于，利用CSS屬性，你可以簡單的修改相應(yīng)選擇器里變量值而調(diào)整動畫，

20、而不需要挨個去查找keyframes里的屬性了。如何通過Java操作CSS變量另一個超級酷的事情就是，你可以直接通過Java代碼訪問CSS變量。假設(shè)在你的CSS文件中，有一個叫做-left-pos的變量，作用在.sidebar選擇器中，值為100px:|.sidebar-left-pos:100px;那么，通過Java獲取-left-pos值，會像下面這樣：I/緩存你即將操縱的元素constsidebarElement=document.querySelector('.sidebar');緩存sidebarElement的樣式于cssStyles中constcssStyles=getComputedStyle(sidebarElement);獲取-left-posCSS變量的值constcssVal=String(cssStyles.getPropertyValue('-left-pos').trim();/將CSS變量的值打印到控制臺：100pxconsole.log(cssVal);如果想通過Java設(shè)置CSS變量的值，你可以像這樣：|sidebarElement.style.setProperty('-le

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論