妙用CSS变量，让你的CSS变得更心动

鐢–SS鍙橀噺璁╀綘鐨凜SS鏇寸簿褰╃姝㈣浆杞芥垨鎶勮銆傚闇€杞浇锛屽彲鑱旂郴浣滆€呮巿鏉冦€傚墠瑷€CSS鍙橀噺涔熺О涓篊SS鑷畾涔夊睘鎬с€傛€庝箞绐佺劧鎻愯繖涓緢灏戜汉鐢ㄧ殑涓滆タ锛熷洜涓烘渶杩戦噸鏋勪簡鑷繁鐨勫畼缃戯紝涓嶇煡閬撲负浠€涔堢獊鐒跺枩娆㈢敤CSS鍙橀噺銆傛垨璁稿畠闅愯棌鐨勯瓍鍔涜绗旇€呬负涔嬪€惧€掑惂銆傝鍒癈SS涓轰粈涔堣鐢ㄥ彉閲忥紝鎴戜滑涓句釜鏍楀瓙锛屼及璁″ぇ瀹朵竴鐪嬪氨鏄庣櫧浜嗐€?*涓嶈浣跨敤CSS鍙橀噺*/.title{background-color:red;}.desc{background-color:red;}/*浣跨敤CSS鍙橀噺*/:root{--bg-color:red;}.title{background-color:var(--bg-color);}.desc{background-color:var(--bg-color);}鐪嬪畬鍙兘浼氳寰椾娇鐢–SS鍙橀噺鐨勪唬鐮侀噺鏈夌偣澶ф洿澶氾紝浣嗕綘鏈夋病鏈夋兂杩囷紵绐佺劧鏈変竴澶╋紝閭伓鐨勭瓥鍒掑笀鍏勫拰璁捐甯堝皬濮愯瑕佸仛涓€涓崲鐨姛鑳姐€傛寜鐓ч€氬父鐨勬€濊矾锛屼及璁℃湁鐨勫悓瀛︿細鏍规嵁榛樿鐨勯鑹蹭富棰樻坊鍔犱竴涓柊鐨勯鑹蹭富棰楥SS鏂囦欢杩涜瀵规瘮銆傛瘡娆℃湁鏂扮殑闇€姹傝鍚屾椂缁存姢濂藉嚑濂椾富棰樿壊鏄涔堢殑楹荤儲鍟娿€傝繖鏃跺€機SS鍙橀噺灏辨淳涓婄敤鍦轰簡銆傚彲浠ヤ簨鍏堝拰璁捐灏忓濮愭寚瀹氶渶瑕佹洿鏀圭殑棰滆壊锛岄€氳繃CSS鍙橀噺瀹氫箟銆備綘鍙互閫氳繃JS鎵归噺鎿嶄綔杩欎簺瀹氫箟濂界殑CSS鍙橀噺銆傝繖涔熸槸鏇存敼涓婚棰滆壊鐨勮В鍐虫柟妗堜箣涓€銆傚ソ澶勬槸鍙渶瑕佸啓涓€濂桟SS浠ｇ爜銆俒"red","blue","green"].forEach(v=>{constbtn=document.getElementById(`${v}-theme-btn`);btn.addEventListener("click",()=>document.body.style.setProperty("--bg-color",v));});杩欓噷鎬荤粨涓€涓嬪湪CSS涓娇鐢ㄥ彉閲忕殑濂藉锛氬噺灏戞牱寮忎唬鐮佺殑閲嶅澧炲姞鏍峰紡浠ｇ爜鐨勫彲鎵╁睍鎬ф敼杩涙牱寮忎唬鐮佸鍔犵伒娲绘€т竴绉岰SS鍜孞S涔嬮棿鐨勯€氫俊鏂瑰紡锛屼笉闇€瑕佹繁鍏ラ亶鍘咲OM鏉ユ敼鍙樻煇涓鏍笺€傚彲鑳芥湁鍚屽浼氶棶锛孲ass鍜孡ess閮藉凡缁忓疄鐜颁簡鍙橀噺鐨勭壒鎬э紝浣曞繀鍛€備絾浠旂粏鎯虫兂锛孋SS鍙橀噺浼樹簬Sass鍜孡ess鍙橀噺銆傛祻瑙堝櫒鍘熺敓鐨勭壒鎬у彲浠ョ洿鎺ヨ繍琛孌OM瀵硅薄鐨勪竴涓€嬧€嬫垚鍛橈紝涓嶉渶瑕佷换浣曠炕璇戯紝澶уぇ鏂逛究浜咰SS鍜孞S鐨勮鎺ャ€傛垜瑙夊緱娌″繀瑕侊紝鎵€浠ヨ创鍑洪槷涓€宄拌€佸笀鍐欑殑鏁欑▼銆奀SS鍙橀噺鏁欑▼銆嬨€傚悓鏃剁瑪鑰呬篃瀵笴SS鍙橀噺鐨勭粏鑺傝繘琛屼簡姊崇悊锛屾柟渚垮ぇ瀹惰蹇嗐€傚０鏄庯細--鍙橀噺鍚嶈浣滐細var(--鍙橀噺鍚嶏紝榛樿鍊?typenormal锛氬彧鑳戒綔涓哄睘鎬у€硷紝涓嶈兘浣滀负灞炴€у悕瀛楃锛氫笌瀛楃涓测€淗ello,鈥濊繛鎺ar(--name)value:浣跨敤甯︽湁鏁板€煎崟浣嶇殑calc()锛屼娇鐢╲ar(--width)*10px浣滅敤鍩燂細鍦ㄥ綋鍓嶅厓绱犲潡浣滅敤鍩熷強鍏跺瓙鍏冪礌鍧椾綔鐢ㄥ煙鑼冨洿鍐呮湁鏁堜紭鍏堢骇锛氬唴鑱旀牱寮?ID閫夋嫨鍣?绫婚€夋嫨鍣?灞炴€ч€夋嫨鍣?浼被閫夋嫨鍣?鏍囩閫夋嫨鍣?浼厓绱犻€夋嫨鍣ㄤ笅闈㈤€氳繃鍑犱釜鐗规畩鍦烘櫙鏉ュ睍绀篊SS鍙橀噺鐨勯瓍鍔涖€傝繕鏄偅鍙ヨ瘽锛屼竴涓笢瑗挎湁浜嗕娇鐢ㄥ満鏅紝鑷劧灏辨湁瀹冪殑浠峰€硷紝鐢ㄧ殑浜哄氨浼氳秺鏉ヨ秺澶氥€備娇鐢ㄥ満鏅簨瀹炰笂锛孋SS鍙橀噺鏈変竴涓壒鍒湁鐢ㄧ殑鍦烘櫙锛岄偅灏辨槸鍙互鍜屼竴缁凩ist鍏冪礌缁撳悎浣跨敤銆傚鏋滄偍涓嶆槑鐧借繖鏄粈涔堬紝璇风户缁槄璇汇€備笅闈㈡墍鏈夌殑demo浠ｇ爜閮芥槸鍩轰簬vue鏂囦欢锛屼絾鏄疕TML銆丆SS銆丣S鏄垎寮€鍐欑殑銆備负浜嗙畝鍖朇SS鐨勭紪鍐欙紝浣跨敤Sass杩涜棰勫鐞嗭紝鏂逛究浠ｇ爜婕旂ず銆備竴涓猙arloadingbar閫氬父鐢卞嚑琛岀粍鎴愶紝姣忚瀵瑰簲鍚屼竴涓姩鐢讳笉鍚岀殑寤舵椂锛岄€氳繃鏃堕棿宸繍琛屽悓涓€涓姩鐢讳骇鐢焞oading鏁堟灉銆備及璁″ぇ閮ㄥ垎鍚屽鍙兘浼氭妸CSS浠ｇ爜鍐欐垚涓嬮潰杩欐牱銆?ulclass="strip-loadingflex-ct-x">.loading{width:200px;楂樺害锛?00px锛沴i{border-radius:3px;瀹藉害锛?px锛涢珮搴︼細30px锛涜儗鏅壊锛?f66锛涘姩鐢伙細鑺傛媿1s鏃犻檺缂撳叆缂撳嚭锛?+li{宸﹁竟璺濓細5px;-child(2){鍔ㄧ敾寤惰繜锛?00ms锛泒&:nth-child(3){鍔ㄧ敾寤惰繜锛?00ms锛泒&:nth-child(4){鍔ㄧ敾寤惰繜锛?00ms锛泒&:nth-child(5){鍔ㄧ敾寤惰繜锛?00ms锛泒&:nth-child(6){鍔ㄧ敾寤惰繜锛?s锛泒}}鍒嗘瀽浠ｇ爜锛屽彂鐜版瘡涓?li>鍙槸animation-delay涓嶄竴鏍凤紝鍏朵綑浠ｇ爜瀹屽叏涓嶄竴鏍凤紝鍚岀悊锛屾崲鎴愬叾浠栫被浼肩殑List鍏冪礌闆嗗悎鍦烘櫙锛屼綘浼氫笉浼氳繖鏍峰啓10濡傛灉鏈?0涓?li>:nth-child銆傛樉鐒讹紝杩欑鏂瑰紡涓嶅鐏垫椿锛屼篃涓嶅鏄撳皝瑁呮垚缁勪欢銆傚鏋滆兘鍍廕S涓€鏍峰皝瑁呮垚涓€涓嚱鏁帮紝鏍规嵁鍙傛暟杈撳嚭涓嶅悓鐨勬牱寮忔晥鏋滃氨鏇村ソ浜嗐€傝鍒拌繖閲岋紝寰堟槑鏄炬槸涓篊SS鍙橀噺鐨勫紑鍙戞妧宸у仛閾哄灚銆傚浜嶩TML閮ㄥ垎鐨勪慨鏀癸紝璁╂瘡涓?li>鍦ㄨ嚜宸辩殑浣滅敤鍩熶笅閮芥湁涓€涓狢SS鍙橀噺銆傚浜嶤SS閮ㄥ垎鐨勪慨鏀癸紝闇€瑕佸垎鏋愬摢浜涘睘鎬ч殢鐫€绱㈠紩鐨勫鍔犳湁瑙勫緥鐨勫彉鍖栵紝浣跨敤CSS鍙橀噺琛ㄨ揪寮忔潵鏇挎崲瑙勫緥鍙樺寲鐨勯儴鍒嗐€?ulclass="strip-loadingflex-ct-x">.strip-loading{width:200px;楂樺害锛?00px锛沴i{--time:calc((var(--line-index)-1)*200ms);杈圭晫鍗婂緞锛?px锛涘搴︼細6px锛涢珮搴︼細30px锛涜儗鏅壊锛?f66锛涘姩鐢伙細鑺傛媿1.5绉抏ase-in-outvar(--time)infinite锛?+li{宸﹁竟璺濓細5px;鑾峰彇鏂囨湯浠ｇ爜涓殑鍙橀噺--line-index鍜?-time锛岃姣忎釜