馃コ娆㈣繋鎰熷叴瓒ｇ殑鏈嬪弸锛屼竴璧锋潵鍋氱偣鏈夋剰涔夌殑浜嬪惂锛佹湰鏂囪瘧鑰咃細Yixu鎴戞帹鍑轰簡涓€涓瘡鍛ㄧ炕璇戦」鐩紝浠撳簱鍦板潃锛岃闂湴鍧€杩樻槸寰堢己蹇楀悓閬撳悎鐨勬湅鍙嬶紝绾睘涓汉鍏磋叮锛屽綋鐒朵篃鏈夊姪浜庢彁楂樿嫳璇拰鍓嶇鎶€鑳斤紝瑕佹眰锛氳嫳璇笉宸璋憋紝鐔熺粌浣跨敤github锛屾湁姣呭姏锛岃唉铏氾紝鍋氫簨鏈夎矗浠诲績銆傛兂鍙備笌鐨勬湅鍙嬪彲浠ョ淇x锛屾垨鑰呯粰浠撳簱鍙慽ssue娑堟伅銆傛垜鐨勫崥瀹㈣繕鏈夊叿浣撶殑涓汉鑱旂郴鏂瑰紡锛歞aodaolee.cn浠€涔堟槸CSS鑷畾涔夊睘鎬э紵CSS鑷畾涔夊睘鎬х浉褰撲簬JS涓殑let锛屽彲浠ョ敤鏉ュ畾涔夋牱寮忎腑澶嶇敤鐨勫睘鎬с€傚悓鏃朵粬浠嶇劧閬靛畧CSS鐨勭骇鑱旇鍒欍€傝繖鎰忓懗鐫€鎴戜滑鍙互涓鸿嚜瀹氫箟灞炴€у畾涔夐粯璁ゅ睘鎬у€硷紝鐒跺悗鏍规嵁闇€瑕佽鐩栧畠浠€傝嚜瀹氫箟灞炴€у彲浠ラ€氳繃鍦ㄥ睘鎬у墠闈㈠姞涓や釜鐮存姌鍙锋潵瀹炵幇--my-property浣跨敤CSS鍑芥暟var()璋冪敤涓嬮潰鐨勪緥瀛愬畾涔変簡涓€涓?-color鐨勮嚜瀹氫箟灞炴€э紝骞跺皢鍏剁敤浜巆olor鐨勫睘鎬у€笺€俠tn{--棰滆壊锛氳摑鑹诧紱color:var(--color);}瀹冧滑涓庨澶勭悊鍣ㄥ彉閲忔湁浣曚笉鍚岋紵铏界劧Sass鍜孡ess绛夐澶勭悊鍣ㄦ棭宸插皢鍙橀噺鎶曞叆鐢熶骇锛屼絾鍦ㄧ紪璇戝悗鐨勬牱寮忚〃涓紝鐢熸垚鐨勫€间粛鐒舵槸甯搁噺銆傞澶勭悊鍣ㄤ腑鐨勫彉閲忔洿閫傜敤浜庢牱寮忎腑閲嶅鐨勫睘鎬у€硷紝浣嗙紪璇戝悗涓嶉渶瑕佹洿鏀广€傚浜庨€氳繃鍐呰仈鏍峰紡瑕嗙洊鍜屾牱寮忚〃涓婁笅鏂囧姩鎬佹敼鍙樼殑灞炴€у€硷紝鑷畾涔夊睘鎬ф洿鏈変紭鍔裤€傛澶栵紝濡傛灉鎴戜滑浣跨敤棰勫鐞嗗櫒璁剧疆鎸夐挳鐨勫瓧浣撻鑹诧紝褰撴垜浠娇鐢ㄧ被浼?hover鐨勪笢瑗挎潵鏇存敼鎸夐挳鏃讹紝閲嶆柊鎸囧悜灞炴€у€肩殑鍞竴鏂规硶鏄彟涓€涓澶勭悊鍣ㄥ彉閲忋€傛崲鍙ヨ瘽璇达紝鎴戜滑鏃犳硶鍦ㄥ畾涔夐澶勭悊鍣ㄥ彉閲忓悗鏇存敼瀹冪殑鍊硷紝浣咰SS鑷畾涔夊睘鎬у彲浠ラ€氳繃绾ц仈瑙勫垯鏉ュ仛鍒拌繖涓€鐐广€傞澶勭悊鍣ㄥ彉閲忕殑鍙︿竴涓紭鐐规槸瀹冧滑鍙互瀹氫箟涓哄瓧绗︿覆骞跺湪浠讳綍鍦版柟浣跨敤锛屼緥濡傚獟浣撴煡璇㈡柇鐐癸紝鎴栦互涓嬮€夋嫨鍣ㄥ瓧绗︿覆//$classes:".class-a,class-b"!default;#{$classes}{//瀹氫箟CSS灞炴€涓轰粈涔堣浣跨敤鑷畾涔夊睘鎬э紵璁╂垜浠敤鍓嶉潰鐨勬寜閽ず渚嬫潵鍥炵瓟杩欎釜闂銆傚鏋滄垜鎯冲湪鎮仠鏃舵洿鏀规寜閽枃鏈拰杈规棰滆壊锛屾垜鍙互鐩存帴鏇存敼--color鍊笺€傛敞鎰忔垜浠浣曚粎灏唙ar()鍑芥暟鐢ㄤ綔鍊肩殑涓€閮ㄥ垎锛屽湪杩欑鎯呭喌涓嬶紝瀹氫箟杈规棰滆壊銆?btn{--棰滆壊锛氳摑鑹诧紱棰滆壊锛歷ar(--棰滆壊)锛沚order:2pxsolidvar(--color);濉厖锛?.25em0.5em锛涜竟鐣屽崐寰勶細0.25em锛泃ext-decoration:none;}.btn:hover{--color:red;}浣跨敤鑷畾涔夊睘鎬ц缃粯璁ゅ€糃SS鍑芥暟var()鏃㈠彲浠ヨ皟鐢ㄨ嚜瀹氫箟灞炴€т篃鍙互璁剧疆榛樿鍊笺€傚涓嬶細var(--color,blue)鎴戜滑鐢氳嚦鍙互璁剧疆涓€涓嚜瀹氫箟灞炴€т綔涓洪粯璁ゅ€硷紝璁╂垜浠啓涓€涓笉鍚岀増鏈殑.btn绫绘潵浣跨敤--color浣滀负--border-color.btn鐨勯粯璁ゅ€?v2{--棰滆壊锛氳摑鑹诧紱棰滆壊锛歷ar(--棰滆壊)锛沚order:2pxsolidvar(--border-color,var(--color));濉厖锛?.25em0.5em锛涜竟鐣屽崐寰勶細0.25em锛泃ext-decoration:none;}.btn-v2:hover{--border-color:red;}鑷畾涔夊睘鎬х殑缁ф壙鏍规嵁鍓嶉潰瀵硅嚜瀹氫箟灞炴€х殑浠嬬粛锛屼綘鍙兘浼氳涓烘墍鏈夌殑鑷畾涔夊睘鎬ч兘搴旇淇濆瓨鍦?root涓婇€夋嫨鍣紝鎴戞兂寤鸿鐨勬槸锛屽湪:root閫夋嫨鍣ㄤ笂锛屽彧搴旇淇濆瓨鐪熸鐨勫叏灞€灞炴€э紝鑷畾涔夊睘鎬у簲璇ュ敖鍙兘闈犺繎瀹冧滑琚皟鐢ㄧ殑鍦版柟銆傝繕鏈変竴涓叧閿偣灏辨槸閫氳繃CSS鐨勮绠楀嚱鏁帮紝姣斿鍦╟alc()绛変腑浣跨敤鑷畾涔夊睘鎬у€兼椂锛屾渶缁堣绠楀嚭鏉ョ殑鍊间細缁ф壙璁＄畻鍑烘潵鐨勬渶缁堝€笺€傚鏋滀繚瀛樺湪:root閫夋嫨鍣ㄤ笂锛屽皢鏃犳硶鏇存敼濡備笅锛岃櫧鐒?root閫夋嫨鍣ㄤ腑鐨?unit琚鐩栦簡锛屼絾鏄?-size-lg寰楀埌鐨勬槸鏈€缁堝€硷紝鎵€浠argin-top--3xl鐨勪笂杈硅窛杩樻槸30px:root{--unit:10px;--size-lg:calc(3*var(--unit));}/*杩欎笉浼氶噸鏂拌绠?-size-lg*/.margin-top--3xl{--unit:30px;鐨勫€糾argin-top:var(--size-lg);}瑙ｅ喅杩欑缁ф壙闂閫氬父閲囩敤锛氭牴閫夋嫨鍣ㄥ拰鍏朵粬閫夋嫨鍣ㄧ殑缁勫悎鍦ㄤ笅闈㈢殑渚嬪瓙涓紝鐢变簬--margin-unit鍜?-multiplier.margin-top--3xl鐨勫睘鎬ц鐩栦簡.margin-top瀵瑰簲鐨勫睘鎬э紝鎵€浠argin-top瀹炵幇浜嗗姩鎬佹晥鏋滐細root{--unit:10px;}.margin-top{--margin-unit:var锛?鍗曞厓锛?鈥斺€斾箻鏁帮細1锛涗繚璇侀噾椤堕儴锛歝alc锛坴ar锛?-multiplier锛?var(--margin-unit));}.margin-top--3xl{--margin-unit:30px;--multiplier:3;}div[class*="margin"]{鑳屾櫙棰滆壊锛歞odgerblue锛涳細鐧借壊鐨?濉厖锛?.5rem锛沠ont-size:1.5rem;}鎴戜滑涔熷彲浠ュ湪椤圭洰涓娇鐢╱ndefined鑷畾涔夊睘鎬э紝璁╅」鐩洿鐏垫椿undefined鐨勫ソ澶勬槸鍙互浠庝换浣曠鍏堝厓绱犵户鎵垮€间娇鐢╱ndefined灞炴€у綋鎴戜滑閫氬父鏈変互涓嬩袱绉峯ptions锛氬睘鎬ф湭瀹氫箟锛屾病鏈夐粯璁ゅ€硷紝鏈夌偣鍍忚璧嬩簣unset渚嬪锛歝olor:var(--color)灞炴€ф湭瀹氫箟锛屼絾鏈夐粯璁ゅ€硷紝娌℃湁缁ф壙鏃朵細浣跨敤value榛樿鍊间緥濡傦細color:var(--color,blue)浣跨敤JavaScript寮曠敤鍜屽畾涔夎嚜瀹氫箟灞炴€avaScript鎿嶄綔CSS鑷畾涔夊睘鎬у簲鐢ㄥ満鏅細CSS鍔ㄧ敾鍙樻崲values鍝嶅簲寮忓竷灞€ViewportsizeCSS涓笉鑳藉崟鐙幏鍙栫殑浠讳綍涓滆タvalues鑰屼笉鏄笉鍙楁敮鎸佺殑CSS灞炴€ц鍦↗avaScript涓闂嚜瀹氫箟灞炴€х殑鍊硷紝鎮ㄩ渶瑕佷娇鐢╣etComputedStyle()鍜実etPropertyValue()getComputedStyle(element).getPropertyValue("--my-var");鎺ヤ笅鏉ユ垜浠皢浣跨敤JavaScript鑾峰彇娈佃惤鐨勫搴︺€傜劧鍚庡皢鍏朵綔涓鸿壊璋冨€煎垎閰嶇粰hsl()棰滆壊鍑芥暟.js-color{background-color:hsl(var(--hue),100%,80%);棰滆壊锛氶粦鑹?瀛椾綋澶у皬锛?.5rem锛沺adding:1rem;}.js-color::after{content:"Current:"attr(style);}constp=document.querySelector('.js-color');constsetColor=()=>p.style銆俿etProperty('--hue',p.offsetWidth);window.onresize=setColor;setColor();缁撳悎棰勫鐞嗗櫒鍙橀噺鍜孋SS鑷畾涔夊睘鎬х粨鍚堥澶勭悊鍣ㄥ彉閲忓拰鑷畾涔夊彉閲忓彲浠ュ厖鍒嗗彂鎸ヤ袱鑰呯殑浼樺娍锛岃繖閲屼互Sass涓轰緥銆備娇鐢⊿ass鍙橀噺浣滀负鑷畾涔夊睘鎬у€硷紝鍙互浣跨敤濡備笅鎻掑€兼柟寮?-custom-property:#{$sass-var};鍦ㄦ櫘閫氱殑浣滃搧涓紝瀹冨氨鍍忔槸鍝佺墝涓婚鑹插僵绛夊姛鑳姐€傛垜浠彲浠ヤ娇鐢⊿ass鐨?default鏉ヨ缃粯璁ゅ€硷紝杩欐剰鍛崇潃璇ュ€煎彲浠ヨ瑕嗙洊銆傜劧鍚庢垜浠彲浠ュ皢鍏剁敤浣滆嚜瀹氫箟灞炴€у€硷紝鎴戜滑鍙互鍒╃敤鍏朵粬Sass鍔熻兘锛堜緥濡傚惊鐜級鏉ョ敓鎴愮被浼肩殑灞炴€х粍銆?color-link:blue!default;$font-sizes:("small":.875rem,"normal":1rem,"medium":1.25rem,"large":2rem)!default;:root{--color-閾炬帴锛?{$棰滆壊閾炬帴}锛汙each$size,$valuein$font-sizes{--font-size-#{$size}:#{$value};}}鐩稿叧閾炬帴CSSCustomProperties缈昏瘧鍘熷浘
