CSS要支持嵌套了，SASS-LESS等预处理器没用了？

鏈€杩戞湁涓€涓潪甯告尟濂嬩汉蹇冪殑娑堟伅锛孋SS鍗冲皢鍘熺敓鏀寔宓屽鈥斺€擜genda+鍙戝竷浜哊esting鐨凢PWD锛岄绀虹潃CSS宓屽瑙勮寖鍗冲皢杩涘叆瑙勮寖鐨凢WPD闃舵銆傜洰鍓嶅搴旂殑瑙勮寖鏄€斺€擟SSNestingModule銆傞殢鐫€CSS鑷畾涔夊睘鎬э紙CSSVariable锛夌殑澶ц妯″吋瀹癸紝CSS鍗冲皢鏀寔宓屽锛屼竴浜涢澶勭悊鍣ㄧ殑鏍稿績鍔熻兘宸茬粡琚獵SS鍘熺敓鏀寔銆傝繖鏄惁鎰忓懗鐫€鍍廠ASS/LESS杩欐牱鐨勯澶勭悊鍣ㄥ氨娌＄敤浜嗭紵锛熷嵆灏嗚娣樻卑锛熻鑼冪殑鍑犱釜闃舵棣栧厛绠€鍗曚粙缁嶄竴涓嬩竴涓鑼冧粠鎻愯鍒板疄鏂戒細缁忓巻鐨勯樁娈碉細Editor'sDraft(ED)WorkingDraft(WD)Transition-LastCallWorkingDraft(LCWD)CandidateRecommendation(CR)TransitionProposedRecommendationTransition鈥揚roposedRecommendations(PR)RecommendedStandardRecommendation(REC)濡備笂鎵€杩帮紝瀹冨嵆灏嗚繘鍏PWD锛屼絾瀹冨彧鏄湪瑙勮寖WD闃舵鐨勭浜岄樁娈碉紝FPWD琛ㄧずFirstPublicWorkingDraft(FPWD)銆侳PWD涔嬪悗灏嗘湁鍑犱釜宸ヤ綔鑽夋锛屽鐞嗘潵鑷狢SSWG鍐呭鏇村箍娉涚ぞ缇ょ殑鍙嶉銆傚畬鍠勭殑鏍囧噯鍖栬璁°€備篃灏辨槸璇达紝鐩墠鏉ョ湅锛屽嵆渚垮悗缁繃绋嬮『鍒╋紝浣嗚窛绂绘祻瑙堝櫒澶ц妯¤惤鍦拌鑼冪殑閭ｄ竴澶╋紝杩樻湁寰堥暱涓€娈垫椂闂淬€傚彟澶栵紝鎴戣寰楀儚SASS\LESS杩欐牱鐨勯澶勭悊鍣ㄦ湁涓€浜涙湁瓒ｇ殑鍔熻兘锛坒unctions锛夛紝鍗充娇鍦ㄥ師鐢烠SS鏀寔鑷畾涔夊睘鎬у拰宓屽涔嬪悗锛岃繖浜涘姛鑳借繕鏄湁鎵€娆犵己銆傛垜绠€鍗曞垪涓句竴涓嬫垜鐨勭湅娉曘€俧or()寰幆鍑芥暟鐩墠锛屽師鐢烠SS杩樹笉鏀寔寰幆鍑芥暟銆備絾瀹為檯涓婏紝鍦ㄩ澶勭悊鍣ㄤ腑锛屽惊鐜粛鐒舵槸涓€涓瘮杈冨父鐢ㄧ殑鍑芥暟銆傝€冭檻濡備笅甯冨眬锛歶l涓嬫湁澶氫釜li锛屾瘡涓猯i鐨勯珮搴﹀鍔?0px銆傚綋鐒朵篃鍙互涓€涓竴涓啓锛屼絾鏄湁涓惊鐜叾瀹炲彲浠ュぇ澶у噺灏戝伐浣滈噺锛?ul>

濡傛灉娌℃湁棰勫鐞嗗櫒锛屾垜浠殑CSS鍙兘鐪嬭捣鏉ュ儚杩欐牱锛歶l{display:flex;瀵归綈椤圭洰锛氬熀绾匡紱璇佹槑鍐呭锛氱┖鏍间箣闂达紱}li{瀹藉害锛?0px锛沚ackground:#000;}li:nth-child(1){height:20px;}li:nth-child(2){height:40px;}//...3~9li:nth-child(10){height:200px;}濡傛灉浣跨敤SASS棰勫鐞嗗櫒锛屽彲浠ョ畝鍖栦负锛歶l{display:flex;瀵归綈椤圭洰锛氬熀绾匡紱璋冩暣鍐呭锛氱┖鏍硷紱}li{瀹藉害锛?0px;鑳屾櫙锛?000;}@for$i浠?鍒?0{li:nth-child(#{$i}){height:calc(#{$i}*20px);}}褰撶劧锛岄櫎姝や箣澶栵紝寰幆鏄緢澶氬鏉傜殑CSS鍔ㄧ敾鏁堟灉涓潪甯搁潪甯稿父鐢ㄧ殑涓€涓姛鑳姐€傛瘮濡備竴浜涚矑瀛愬姩鐢伙紝鎴戜滑閫氬父闇€瑕佹搷浣?0-100涓矑瀛愶紝涔熷氨鏄?0-100涓猟iv鏍峰紡锛岀敋鑷虫洿澶氥€傚鏋滄病鏈夊惊鐜紝涓€鏉℃潯鍐欑殑鏁堢巼浼氬ぇ澶ч檷浣庛€傛紨绀轰娇鐢ㄩ澶勭悊鍣ㄥ惊鐜嚱鏁板疄鐜扮殑涓€浜涙晥鏋溿€備笅闈㈡垜绠€鍗曠綏鍒椾竴浜涙垜鑷繁瀹炵幇骞跺簲鐢ㄤ簬CSS棰勫鐞嗗櫒寰幆鍔熻兘鐨勫姩鐢绘晥鏋溿€傚儚涓婇潰浣跨敤绾疌SS瀹炵幇鐨勭伀鐒版晥鏋滐紝鐏劙鐨勫姩鎬佺噧鐑ф晥鏋溿€傚叾瀹炴槸閫氳繃澶ч噺寰矑瀛愮殑杩愬姩鍜岃繃婊ゅ櫒鐨勯厤鍚堟潵瀹炵幇鐨勩€備娇鐢ㄤ簡SASS寰幆鍑芥暟鐨勪竴涓墖娈碉細@for$ifrom1to200{.g-ball:nth-child(#{$i}){$width:#{random(50)}px;瀹藉害锛?瀹藉害锛涢珮搴︼細$瀹藉害锛涘乏锛歝alc(#{(random(70))}px-55px);}.g-ball:nth-child(#{$i}){鍔ㄧ敾锛歮ovetop1slinear-#{random(3000)/1000}sinfinite;}}濂藉惂锛屼笂闈㈢殑寰幆寰幆浜?00娆★紝濡傛灉鐪熻涓€涓竴涓啓锛屽伐浣滈噺杩樻槸寰堝ぇ鐨勩€備笂杩版晥鏋滅殑瀹屾暣浠ｇ爜鍙互鐐瑰嚮杩欓噷锛欳odePenDemo--CSSCandlesif()鏉′欢璇彞涓嬩竴涓槸if()鏉′欢璇彞銆傚叾瀹濩SS涓湁涓€绉嶅啓娉曞拰鏉′欢璇彞寰堢浉浼硷紝灏辨槸mediaquery@media鍜宖eaturedetection@supports璇彞銆傜洰鍓岰SS鏀寔鐨勭被浼兼潯浠堕€夋嫨鐨勪竴浜涘啓娉曞涓嬶細@support鏉′欢璇彞CSS@supports浣跨敤CSS璇硶瀹炵幇鐗瑰緛妫€娴嬶紝鍦–SS鍧楀唴閮ㄥ啓涓婂鏋滅壒寰佹娴嬮€氳繃浣犺瀹炵幇鐨凜SS璇彞.div{浣嶇疆锛氬浐瀹氾紱}@supports锛堜綅缃細绮樻€э級{div{浣嶇疆锛氱矘鎬э紱}}涓婅堪CSS璇彞鐨勬剰鎬濇槸锛屽鏋滃鎴风鏀寔position:sticky锛屽垯浣跨敤position:sticky锛屽惁鍒欎娇鐢╬osition:fixed銆傛繁鍏ユ帰璁–SS鐗瑰緛妫€娴嬪彲浠ョ湅鎴戠殑鏂囩珷锛氭繁鍏ユ帰璁–SS鐗瑰緛妫€娴婡supports鍜孧odernizr@media鏉′欢璇彞鍙﹀涓€涓父瑙佺殑鏉′欢璇彞鏄痬ediaquery锛屽ぇ瀹惰繕鏄瘮杈冪啛鎮夌殑銆傚鏋滃綋鍓嶈澶囨弧瓒虫煇涓潯浠讹紝閭ｄ箞濡備綍婊¤冻銆俛rticle{padding:4rem;}@mediascreenand(min-width:900px){article{padding:1rem3rem;}}鍡紝浠ヤ笂涓や釜鏉′欢璇彞鍙互鐩镐簰宓屽锛欯supports(display:flex){@mediascreenand(min-width:900px){article{display:flex;鐒惰€岋紝浠ヤ笂涓や釜姣曠珶涓嶆槸鎴戜滑涓ユ牸鎰忎箟涓婃湡鏈涚殑if()璇彞銆傚緢鏃╀互鍓嶏紝绀惧尯閲屾湁涓€涓０闊筹紙css-values-if()鍑芥暟锛夛紝鎻愯鍦–SS瑙勮寖涓疄鐜癷f()鏉′欢璇彞锛岀被浼艰繖鏍凤細.foo{--calc:璁＄畻(10*(1vw+1vh)/2);font-size:if(var(--calc)<12px,12px,var(--calc));}浣犲彲浠ョ湅鍒拌繖鏉¤鍙f(var(--calc)<12px,12px,var(--calc))绫讳技浜庝笁鍏冭鍙ワ紝姣旇緝瀹规槗鐞嗚В銆備笉杩囦笂闈㈢殑鏉′欢璇彞涓€鐩翠笉琚敮鎸佺殑鍘熷洜锛屽彲浠ュ湪scss-values-if()鍑芥暟涓瑙佷竴鏂戙€傚師鍥犳槸CSS涓€鐩磋瘯鍥鹃伩鍏嶅睘鎬т箣闂寸殑浠绘剰渚濊禆銆傚湪CSS涓紝灞炴€т箣闂村瓨鍦ㄤ竴浜涢殣鍚殑渚濊禆鍏崇郴锛屾瘮濡俥m鍗曚綅闀垮害鍙楃埗鍏冪礌font-size鐨勫奖鍝嶏紝濡傛灉浣滆€呭彲浠ヤ换鎰忔坊鍔犱緷璧栧叧绯伙紙閫氳繃if()鏉′欢璇彞锛夛紝浼氶€犳垚涓€浜涢棶棰樸€傝瘧鏂囨槸锛氫笉骞哥殑鏄紝杩欐剰鍛崇潃鎴戜滑鍦ㄥ睘鎬т箣闂存坊鍔犱换鎰忎緷璧栧叧绯伙紝鍒扮洰鍓嶄负姝㈡垜浠竴鐩撮伩鍏嶈繖鏍峰仛锛屽洜涓哄畠閫氬父鏄笉鍙В鏋愮殑銆傝嚜瀹氫箟灞炴€у彲浠ヤ换鎰忕浉浜掑紩鐢紝浣嗗畠浠湪瀹冧滑鐨勪綔鐢ㄤ笂鏄湁闄愮殑鍙互鍋氬埌锛屽苟涓斿綋鎴戜滑娉ㄦ剰鍒颁竴涓惊鐜椂锛屾湁涓€绉嶆湁鐐瑰悎鐞嗙殑鈥滃彧鏄彉寰楁棤鏁堚€濈殑琛屼负銆傚浜庝换鎰廋SS锛屽惊鐜洿闅剧‘瀹氾紝鑰屼笖鏇村鏄撳彂鐢燂紝鍥犱负瀛樺湪璁稿鐜版湁鐨勩€侀殣寮忕殑灞炴€ч棿渚濊禆鍏崇郴銆備緥濡傦紝浠讳綍闇€瑕侀暱搴︾殑涓滆タ閮戒緷璧栦簬font-size锛堢敱浜巈m锛夛紝鎵€浠ヤ綘涓嶈兘鍦╢ont-size涓湁涓€涓€兼潵寮曠敤涓€涓渶瑕侀暱搴︾殑灞炴€э紙鎵€浠ユ病鏈夎皟鏁磃ont-size鏉ョ缉鏀炬湁瀹藉害锛侊級銆傞殢鐫€鏃堕棿鐨勬帹绉伙紝鎴戜滑浼氭坊鍔犳绫绘柊鐨勪緷璧栭」锛堜緥濡傛坊鍔爈h鍗曞厓锛岃繖浼氬鑷村琛岄珮鐨勪緷璧栭」锛夛紱濡傛灉浣滆€呭彲浠ユ坊鍔犱换鎰忎緷璧栭」锛屾垜浠皢鏃犳硶娣诲姞鏂扮殑闅愬紡渚濊禆椤癸紝鍥犱负鎷呭績浼氱牬鍧廵xis鍐呭锛堥€氳繃褰㈡垚鍏堝墠鏈夋晥涓旈潪寰幆鐨勫惊鐜級銆傛墍浠SS涓洿鎺ョ殑if()璇彞骞舵病鏈夊疄鐜般€係ASS绛夐澶勭悊鍣ㄤ腑鐨刬f()璇彞鏈€鍚庢垜浠湅涓€涓嬮澶勭悊鍣ㄤ腑if()鐨勪娇鐢紝鍥犱负SASS绛夐澶勭悊鍣ㄨ繕鏄渶瑕佺紪璇戞垚CSS鏂囦欢锛屾墍浠f()鍏跺疄骞朵笉鏄緢甯哥敤銆傚洜涓篠ASS涓殑if()鏃犳硶瀹炵幇绫讳技浜庝笂闈㈡彁鍒扮殑font-size:if(var(--calc)<12px,12px,var(--calc))鐨勫姛鑳姐€傚湪SASS涓紝鎴戣涓烘渶甯哥敤鐨刬f()鍙兘鏄繖绉嶅満鏅細@mixintriangle($size,$color,$direction){height:0;瀹藉害锛?锛涜竟妗嗛鑹诧細閫忔槑锛涜竟妗嗘牱寮忥細瀹炲績锛涜竟妗嗗搴︼細$澶у皬锛汙if$direction==up{border-bottom-color:$color;}@elseif$direction==right{border-left-color:$color;}@elseif$direction==down{border-top-color:$color;}@elseif$direction==left{border-right-color:$color;}@else{@error鈥滄湭鐭ユ柟鍚?{$direction}銆傗€?}}.next{@includetriangle(5px,black,right);}浠ヤ笂浠ｇ爜鏄涓夎褰SS瀹炵幇鐨勫皝瑁咃紝閫氳繃浼犲叆鐨勫弬鏁板彲浠ュ疄鐜颁笉鍚屾柟鍚戙€侀鑹层€佸ぇ灏忕殑涓夎褰篃灏辨槸璇达紝棰勫鐞嗗櫒涓殑if()鏇村鍦板畬鎴愪簡涓€浜涘姛鑳界殑灏佽锛屾柟渚垮鐢ㄣ€傚疄闄呬笂涓婇潰鐨勪唬鐮佷細琚紪璇戞垚锛?next{height:0;瀹藉害锛?锛涜竟妗嗛鑹诧細閫忔槑锛涜竟妗嗘牱寮忥細瀹炲績锛涜竟妗嗗搴︼細5px锛沚order-left-color:black;}Random()闅忔満鍑芥暟濂戒簡锛屾帴涓嬫潵灏辨槸闅忔満鍑芥暟锛岃繖鏄疭ASS绛夐澶勭悊鍣ㄤ腑鏈€甯哥敤鐨勫嚱鏁般€傜洰鍓嶆湰鏈篊SS涓嶆敮鎸佷换浣曞舰寮忕殑闅忔満鍖栥€傚湪CSS鍔ㄧ敾鏁堟灉涓紝鎴戜滑涓嶅笇鏈涘緢澶氬洜绱犳槸闈欐€佺殑銆傛垜浠笇鏈涚殑鏄垜浠瀹氫竴涓熀鏈殑瑙勫垯锛岃浠栦滑鍦ㄤ竴涓寖鍥村唴锛岃繖鏍锋瘡娆″埛鏂伴兘鑳戒骇鐢熶笉鍚岀殑鍊笺€傚奖鍝嶃€傛渶甯歌鐨勬槸涓嶅悓鐨勯鑹层€佷笉鍚岀殑闀垮害銆佷笉鍚岀殑鏁伴噺绛夌瓑銆備緥濡傦紝浣跨敤CSS瀹炵幇鐨勬晥鏋滃涓嬶細澶忔棩鏃ヨ惤鍥俱€傞€氳繃random锛屾垜浠彲浠ュ湪姣忔鍒锋柊鏃跺緱鍒颁笉鍚岄珮/瀹姐€佷笉鍚屼綅缃殑div鍧楋紝鍒╃敤闅忔満鐗规€х粯鍒跺嚭涓嶅悓鐨勬晥鏋滃浘锛欴EMO鈥斺€斿鏃ュ闃冲浘鐩墠涓嶆敮鎸佷换浣曞舰寮忕殑鍘熺敓CSSRandom銆備娇鐢ㄩ澶勭悊鍣ㄥ彧鑳藉湪缂栬瘧鍓嶇紪鍐欓殢鏈哄嚱鏁般€係ASS涓殢鏈哄嚱鏁扮殑涓€浜涘父鐢ㄥ啓娉曪細$r:random(100);random()鏄疭ASS鏀寔鐨勫嚱鏁般€備笂闈㈢殑$r鏄?鍒?00涔嬮棿鐨勯殢鏈烘暣鏁帮紝鍙互寰楀埌銆備娇鐢╮andom()鍙互灏佽鍚勭闅忔満鍑芥暟锛屾瘮濡傞殢鏈洪鑹诧細@functionrandomNum($max,$min:0,$u:1){@return($min+random($max))*$u;}@functionrandomColor(){@returnrgb(randomNum(255),randomNum(255),randomNum(255));}div{background:randomColor();}鍦ㄦ湰鏈篊SS涓疄鐜皉andom()鐨勪竴浜涙兂娉曞涓嬩互涓嬫槸绀惧尯瀵瑰湪鍘熺敓CSS涓疄鐜皉andom()鍑芥暟鐨勪竴浜涙兂娉曘€傛湁鍏磋叮鐨勫彲浠ョ寷鎴筹細[[css-values]random()function](https://github.com/w3c/csswg-...绠€鍗曟惉杩愪竴浜涙瘮杈冩湁鎰忔€濈殑瑙傜偣銆傚亣璁綜SS鍘熺敓瀹炵幇浜唕andom()鍑芥暟锛屼緥濡傦細123

456

789

.foo:hover{棰滆壊锛歳gb(闅忔満(0,255),0,0);}鍋囪ramdom()鏄師鐢烠SS瀹炵幇鐨勯殢鏈哄嚱鏁帮紝鏈変竴浜涗簨鎯呴渶瑕佽В鍐虫垨鑰呰澶у璁ゅ彲锛歳andom(0,255)鐨勫€兼槸浠€涔堟椂鍊欑‘瀹氱殑锛屾瘡娆¤В鏋怌SS锛屾垨鑰呮瘡娆″畠鏄敱搴旂敤绋嬪簭瑙﹀彂鐨勬椂闂达紵涓婇潰鐨凞EMO锛?涓?foo鐨勯鑹插€间竴鏍峰悧锛熷浜庨噸澶嶆偓鍋滐紝褰撳彇娑堟偓鍋滅姸鎬佹椂锛宺andom(0,255)鐨勫€间細鏀瑰彉鍚楋紵涓婅堪闂鍙互褰掔粨涓哄鏋淐SS鍘熺敓鏀寔闅忔満鎬э紝鍒欏繀椤昏В鍐抽殢鏈哄€肩殑鎸佷箙鍖栧拰鏇存柊闂銆傛€讳箣锛岀湅鏉ヤ互鍚嶤SS鍘熺敓鏀寔闅忔満鎬х殑鍙兘鎬ц繕鏄緢澶х殑銆傚伐鍏峰嚱鏁帮細棰滆壊鍑芥暟銆佹暟瀛﹀嚱鏁版渶鍚庯紝鎴戜滑鏉ョ湅鐪嬩竴浜涙湁瓒ｇ殑宸ュ叿鍑芥暟銆傜洰鍓嶏紝鍘熺敓CSS涓嶆敮鎸佷竴浜涘鏉傜殑棰滆壊鍑芥暟鍜屾暟瀛﹀嚱鏁般€備絾鏄澶勭悊鍣ㄥ甫鏈夎繖浜涘姛鑳姐€傚湪鎴戜箣鍓嶅叧浜庨槾褰辩殑鏂囩珷鈥斺€斾綘涓嶇煡閬撶殑CSS闃村奖鎶€宸у拰缁嗚妭涓紝浠嬬粛浜嗕竴涓埄鐢ㄥ閲嶉槾褰卞疄鐜颁笁缁撮槾褰辩殑鏁堟灉銆傛瘮濡傛垜浠瀹炵幇濡備笅鏁堟灉锛氶槾褰辩殑棰滆壊鏀瑰彉浣跨敤SASS鐨勯鑹插嚱鏁帮細fade-out鏀瑰彉棰滆壊鐨勯€忔槑搴︼紝璁╅鑹叉洿閫忔槑desaturate鏀瑰彉棰滆壊鐨勯ケ鍜屽害鍊兼潵浣块鑹蹭笉澶ケ鍜孈functionmakelongrightshadow($color){$val:0px0px$color;@for$i浠?鍒?0{$color:fade-out(desaturate($color,1%),.02);$val:#{$val},#{$i}px#{$i}px#{$color};}@return$val;}p{text-shadow:makelongrightshadow(hsla(14,100%,30%,1));}褰撶劧锛岄櫎浜嗕笂闈袱涓鑹插嚱鏁帮紝SASS杩樻彁渚涗簡寰堝绫讳技棰滆壊鐩稿叧鐨勫嚱鏁帮紝鍙互鐪嬭繖閲岋細Sassbasics-colorfunctions銆傞櫎浜嗛鑹诧紝CSS鏁堟灉涓繕缁忓父浣跨敤鏁板鍑芥暟銆傚湪杩欑瘒鏂囩珷鈥斺€斿湪CSS涓娇鐢ㄤ笁瑙掑嚱鏁扮粯鍒舵洸绾垮浘褰㈠苟鏄剧ず鍔ㄧ敾锛屾垜涓撻棬璁蹭簡濡備綍浣跨敤SASS绛夐澶勭悊鍣ㄥ疄鐜颁笁瑙掑嚱鏁板疄鐜版洸绾匡紝瀹炵幇涓€浜涙湁瓒ｇ殑鏁堟灉锛屽儚杩欐牱锛氬綋鐒讹紝鐩墠SASS涓嶆敮鎸佷笁瑙掑嚱鏁帮紝浣嗘槸鎴戜滑鍙互浣跨敤SASS鍑芥暟鏉ュ疄鐜颁竴缁勪笁瑙掑嚱鏁颁唬鐮侊細@functionfact($number){$value:1;@if$number>0{@for$i浠?鍒?number{$value:$value*$i;}}@return$value;}@functionpow($number,$exp){$value:1;@if$exp>0{@for$ifrom1through$exp{$value:$value*$number;}}@elseif$exp<0{@for$ifrom1through-$exp{$value:$value/$number;}}@return$鍊硷紱}@functionrad($angle){$unit:鍗曚綅($angle);$unitless:$angle/($angle*0+1);@if$unit==deg{$unitless:$unitless/180*pi();}@return$unitless;}@functionpi(){@return3.14159265359;}@functionsin($angle){$sin:0;$瑙掑害锛氬姬搴︼紙$瑙掑害锛夛紱//杩唬澶氭.@for$ifrom0through20{$sin:$sin+pow(-1,$i)*pow($angle,(2*$i+1))/fact(2*$i+1);}@return$sin;}@functioncos($angle){$cos:0;$瑙掑害锛氬姬搴︼紙$瑙掑害锛夛紱//閲嶅澶氭銆侤for$i浠?鍒?0{$cos:$cos+pow(-1,$i)*pow($angle,2*$i)/fact(2*$i);}@return$cos;}@functiontan($angle){@returnsin($angle)/cos($angle);}灏卞師鐢烠SS鑰岃█锛屽叾瀹炲湪鏁板涓婂凡缁忎笅浜嗕笉灏戝姛澶姛鑳姐€備緥濡傦紝鍩烘湰璁＄畻鍑芥暟calc()銆佹瘮杈冨嚱鏁癿ax()銆乵in()銆乧lamp()鐨勫吋瀹规€у凡缁忛€愭鎺ㄥ嚭锛屽彲浠ュぇ瑙勬ā浣跨敤銆備互鍙婄被浼间簬鎸囨暟鍑芥暟pow()銆乻qrt()銆乭ypot()銆乴og()銆乪xp()鐨勪笁瑙掑嚱鏁皊in()銆乧on()銆乼an()姝ュ嚱鏁皉ound()銆乵od()銆乺em()鍦ㄨ鑼僀SSValuesandUnitsModuleLevel4涓篃鏈夋彁鍙婂拰瀹氫箟銆傜浉淇′笉涔呯殑灏嗘潵绀惧尯涓叧浜庢暟瀛﹀嚱鏁扮殑涓€浜涜璁轰細閫愭笎钀藉湴銆傛湁鍏磋叮鐨勪篃鍙互鐪嬭繖閲岋細鏁板琛ㄨ揪寮忔€荤粨涓€涓嬨€傜患涓婃墍杩帮紝灏辩洰鍓嶈€岃█锛屾垜璁や负SASS/LESS绛夐澶勭悊鍣ㄥ湪寰堝鏂归潰杩樻槸鏈夌敤鐨勩€傚湪鍘熺敓CSS鐨勪笂杩颁竴浜涘姛鑳借繕娌℃湁瀹屽叏瀹炵幇涔嬪墠锛岄澶勭悊鍣ㄥ彲浠ュ湪涓€瀹氱▼搴︿笂寮ヨˉCSS銆傜己涔忋€傝€屼笖锛岄櫎浜嗕笂闈㈡彁鍒扮殑涓€浜涙垜涓汉璁や负姣旇緝閲嶈鍜屾湁瓒ｇ殑鍔熻兘鍜屽姛鑳藉锛岄澶勭悊鍣ㄧ殑鍏朵粬鏍稿績鍔熻兘锛屽extend銆乵ixins绛夛紝涔熻兘鏈夋晥鎻愰珮寮€鍙戞晥鐜囥€傛墍浠ワ紝鍦ㄦ湭鏉ョ殑涓€娈垫椂闂撮噷锛屾垜瑙夊緱棰勫鐞嗗櫒杩樻槸鍙互鍜孋SS鍙嬪ソ鍏卞瓨鐨剘鏈€鍚庯紝鏈枃鍒版缁撴潫锛屽笇鏈涘浣犳湁鎵€甯姪锛氾級濡傛灉浣犳兂鑾峰緱鏈€鏈夎叮鐨凜SS璧勬枡锛屼笉瑕侀敊杩囨垜鐨勫叕浼楀彿鈥斺€攊CSS鍓嶇瓒ｉ椈馃槃鏇村绮惧僵CSS鐗规晥锛屽彲浠ュ叧娉ㄦ垜鐨凜SS鐏垫劅銆傛洿澶氱簿褰〤SS鎶€鏈枃绔犳眹鎬诲湪鎴戠殑Github鈥斺€攊CSS锛屾寔缁洿鏂般€傛杩庣偣涓槦鏍囪闃呮敹钘忋€傛湁浠€涔堥棶棰樻垨鑰呭缓璁彲浠ュ浜ゆ祦銆傚師鍒涙枃绔犳枃绗旀湁闄愶紝鐭ヨ瘑鍖箯銆傚鏋滄枃绔犱腑鏈変换浣曚笉鍑嗙‘鐨勫湴鏂癸紝璇峰憡璇夋垜銆?/p>