銆怱ass/SCSS銆憄reloader涓殑銆婅僵杈曞墤銆嬪崥瀹㈣鏄庢枃涓墍娑夊強淇℃伅鏉ユ簮浜庣綉缁滃強涓汉鎬荤粨锛屼粎渚涗釜浜哄弬鑰冨涔犲拰缁忛獙鎬荤粨锛屽鏈変镜鏉冿紝璇疯仈绯绘垜鍒犻櫎锛岃阿璋紒璇存槑闅忕潃鍓嶇鎶€鏈殑椋為€熷彂灞曪紝鍓嶇鐨勯鏍间篃闇€瑕佹洿璐磋繎鏃朵唬瀹＄編锛屾墍浠SS闇€瑕佹壙鎷呮洿澶氱殑宸ヤ綔锛岋紙寮鸿皟锛佽繖涓嶆槸鑰镐汉鍚椈锛佽繖鏄紨绀烘枃绋跨殑鑳屾櫙銆傪煒?锛屼负浜嗚CSS涓婂幓锛宲reloader鍑虹幇浜嗭紝娌￠敊锛孋SS鐢ㄧ殑姝﹀櫒銆係ass/SCSS-preloader涓殑鈥滆僵杈曞墤鈥濓紝杩欎笉鏄垜鍚圭殑锛岃鐨勫氨鏄繖涓紝涓嬪浘灏辨槸涓€涓緥瀛愩€傚畼缃戝湴鍧€锛歋ASS涓枃缃戜粈涔堟槸Sass锛屽畠鍜孲CSS鏈変粈涔堝叧绯伙紵鎴戝湪杩欓噷鎰熷埌鏈夌偣鍥版儜銆傝繖鏄€庝箞鍥炰簨锛熸槑鏄庢槸SASS锛屼絾鏄緢澶氬湴鏂瑰啓鐨勯兘鏄疭CSS銆傚湪缃戜笂鎼滅储SCSS锛屽叏鏄疭aSS鏁欑▼銆?Sass锛圫yntacticallyAwesomeStyleSheets锛夛細鏄竴绉嶇敤buby璇█缂栧啓鐨刢ss棰勫鐞嗚瑷€锛屽叿鏈変弗鏍肩殑缂╄繘椋庢牸銆傚拰css鍐欒鑼冩湁寰堝ぇ鍖哄埆锛屾病鏈変娇鐢ㄨ姳鎷彿鍜屽垎鍙凤紝杩欒寰堝鍓嶇pym闅句互鎺ュ彈銆係ass鏄姞寮篊SS鐨勮緟鍔╁伐鍏凤紝鏄CSS鐨勬墿灞曘€傚畠鍦–SS璇硶鐨勫熀纭€涓婂鍔犱簡鍙橀噺銆佸祵濂楄鍒欍€乵ixins銆佺户鎵匡紙extend锛夈€佸鍏ワ紙inline锛夈€俰mports锛夛紝杩欎簺鎵╁睍浣緾SS鏇村姞寮哄ぇ鍜屼紭闆呫€備娇鐢⊿ass鍜孲ass鏍峰紡搴擄紙渚嬪Compass锛夋湁鍔╀簬鏇村ソ鍦扮粍缁囧拰绠＄悊鏍峰紡鏂囦欢锛屾洿楂樻晥鍦板紑鍙戦」鐩€傚悗缂€涓?sass銆備紭鐐癸細浣跨敤鈥滅缉杩涒€濊€屼笉鏄€滃ぇ鎷彿鈥濇潵琛ㄧず灞炰簬閫夋嫨鍣ㄧ殑灞炴€э紝浣跨敤鈥滄崲琛岀鈥濊€屼笉鏄€滃垎鍙封€濇潵鍒嗛殧灞炴€э紝璁稿浜哄彂鐜拌繖姣擲CSS鏇村鏄撻槄璇诲拰缂栧啓鏇村揩銆係CSS锛圫assyCSS锛夛細涓€绉峜ss棰勫鐞嗚瑷€銆係CSS鏄疭ass3寮曞叆鐨勬柊璇硶锛屽叾璇硶瀹屽叏鍏煎CSS3锛岀户鎵夸簡Sass鐨勫己澶у姛鑳姐€備篃灏辨槸璇达紝浠讳綍鏍囧噯CSS3鏍峰紡琛ㄩ兘鏄叿鏈夌浉鍚岃涔夌殑鏈夋晥SCSS鏂囦欢銆係CSS闇€瑕佸垎鍙峰拰鑺辨嫭鍙凤紝鑰屼笉鏄崲琛岀鍜岀缉杩涖€係CSS瀵圭┖鐧界鍙蜂笉鏁忔劅銆傚叾瀹炲拰CSS3璇硶涓€鏍凤紝鍏跺悗缂€鍒嗗埆鏄?scss銆傛澶栵紝SCSS杩樻敮鎸佸ぇ澶氭暟CSShack鍜屾祻瑙堝櫒鍓嶇紑缂栧啓锛堜緵搴斿晢鐗瑰畾璇硶锛夛紝浠ュ強鏃╂湡鐨処E杩囨护鍣ㄧ紪鍐欍€傚畨瑁匰ass鎮ㄥ彲浠ヤ娇鐢╪pm瀹夎Sass銆俷pminstall-gsassSass鍙橀噺鏄竴涓緢澶х殑鍙樺寲锛孲ass鍙橀噺鍙互瀛樺偍瀛楃涓层€佹暟瀛椼€侀鑹插€笺€佸竷灏斿€笺€佸垪琛ㄣ€佺┖鍊糞ass鍙橀噺浣跨敤$绗﹀彿璇硶$variablename:value;渚嬪瓙$base-font:Helvetica,sans-serif;$my-color:red;$my-font-size:18px;body{font-family:$base-font;瀛椾綋澶у皬锛?鎴戠殑棰滆壊锛沜olor:$y-font-size;}杞崲涓篊SS浠ｇ爜body{font-family:Helvetica,sans-serif;瀛椾綋澶у皬锛?8px锛沜olor:red;}鍏跺疄浣跨敤鍙橀噺灏辨槸鐩存帴鏀惧叆瀵瑰簲鐨勫€笺€傚彉閲忎綔鐢ㄥ煙Sass鍙橀噺鍏跺疄鏄湁浣滅敤鍩熺殑锛孲ass鍙橀噺鐨勪綔鐢ㄥ煙鍙兘鍦ㄥ綋鍓嶅眰绾ф湁鏁?myColor:red;h1{$myColor:green;//浠呭湪h1涓湁鐢紝灞€閮ㄦ晥鏋淔ieldcolor:$myColor;//缁胯壊}p{棰滆壊锛?myColor;//red}鎻愬崌鍏ㄥ眬鍙橀噺Sass鍙互浣跨敤!global鍏抽敭瀛楁潵璁剧疆鍏ㄥ眬鍙橀噺$myColor:red;h1{$myColor:green!鍏ㄧ悆鐨?//鍏ㄥ眬鑼冨洿棰滆壊锛?myColor;//缁胯壊}p{棰滆壊锛?myColor;//green}瀵逛簬Sass鍏ㄥ眬鍙橀噺锛屽彲浠ヤ娇鐢ㄤ竴涓枃浠舵潵瀛樻斁锛岀劧鍚庡叾浠栨枃浠禓include鏉ュ寘鍚鏂囦欢锛岃繖鏍峰彲浠ヤ娇浠ｇ爜缁撴瀯娓呮櫚锛屼究浜庝慨鏀广€係ass鐨勫祵濂楄鍒欐槸鎴戜滑鍐欑殑濂戒笢瑗匡紝涔熸槸鏈€鏄庢樉鐨勫姞娉曘€傚祵濂楃湅浠ｇ爜鍖哄埆鐞嗚Вscss浠ｇ爜nav{ul{margin:0;濉厖锛?0px锛泒li{棰滆壊锛?FFFFFF锛泒}CSS浠ｇ爜navul{margin:0;padding:0;}navli{color:#FFFFFF;}鎴戝彂鐜颁笅闈㈢殑鍐欐硶姣旇緝楹荤儲锛屼富瑕佹槸灞傛涓嶆槑鏄俱€傚祵濂楀睘鎬ass涓殑涓€浜涘睘鎬т篃鍙互宓屽銆備竴浜汣SS灞炴€у叿鏈夌浉鍚岀殑鍓嶇紑锛屼緥濡傦細font-family銆乫ont-size鍜宖ont-weight銆乼ext-align銆乼ext-transform鍜宼ext-overflow銆傚彲浠ユ彁鍙栬繖浜涘叕鍏卞睘鎬с€?/scssfont:{family:Helvetica,sans-serif;灏哄锛?8px锛泈eight:bold;}//cssfont-family:Helvetica,sans-serif;瀛椾綋澶у皬锛?8px锛涘瓧浣撶矖缁嗭細绮椾綋锛沬mportfile@import鍦ㄧ粍浠跺寲寮€鍙戞椂浠ｏ紝Sass褰撶劧瑕佸嵎璧锋潵銆備娇鐢ˊimport鍙互璁╂垜浠噺灏慍SS閲嶅浠ｇ爜骞惰妭鐪佸紑鍙戞椂闂淬€傝娉旲import鏂囦欢鍚嶏紱涓嶤SS@import鐨勫尯鍒獵SS@import鎸囦护鍦ㄦ瘡娆¤皟鐢ㄦ椂閮戒細鍒涘缓涓€涓澶栫殑HTTP璇锋眰銆係ass@import鎸囦护鍦–SS涓寘鍚枃浠惰€屼笉闇€瑕侀澶栫殑HTTP璇锋眰銆俇nderscore涓嬪垝绾块鏍煎懡鍚峉assunderscoresplit鍛藉悕锛岀浉淇″悇浣峱ym鐪嬩簡鍒汉鐨勫紑婧愪唬鐮佸悗浼氬彂鐜板緢澶氾紝绫讳技浜巁partial銆傚埄鐢⊿ass@import瀵煎叆鏂囦欢锛岃繖鏍峰鍏ョ殑鏂囦欢灏变笉浼氳缂栬瘧鎴怌SS銆傝繖绉嶉鏍间篃琚О涓篠assPartials銆傛敞鎰忥細璇蜂笉瑕佸皢甯︿笅鍒掔嚎鍜屼笉甯︿笅鍒掔嚎鐨勫悓鍚嶆枃浠舵斁鍦ㄥ悓涓€鐩綍涓嬶紝渚嬪_colors.scss鍜宑olors.scss涓嶈兘鍚屾椂瀛樺湪浜庡悓涓€鐩綍涓嬶紝鍚﹀垯甯︿笅鍒掔嚎鐨勬枃浠跺皢琚拷鐣ャ€侻ix@mixin鐢ㄤ簬瀵归渶瑕佸湪椤甸潰涓噸澶嶄娇鐢ㄧ殑CSS澹版槑杩涜鍒嗙粍銆傛偍鍙互灏嗗彲鍙樺弬鏁颁紶閫掔粰Mixin锛屼娇浠ｇ爜鏇村姞鐏垫椿銆傛坊鍔犳祻瑙堝櫒鍏煎鎬у墠缂€鏃讹紝姝ゅ姛鑳介潪甯告湁鐢ㄣ€傜ず渚婡mixinimportant-text{color:red;瀛椾綋澶у皬锛?4px锛沠ont-weight:bold;}鎴戜笉璁や负瀹冨お澶т簡锛屾槸鐨勶紝瀹冨疄闄呬笂鏄竴涓唬鐮佸潡锛屼緵鍏朵粬浠ｇ爜閲嶇敤锛屼綘鍙互鎶婂畠褰撲綔涓€涓叕鍏辨柟娉曘€侤include浣跨敤mixin.text{@includeimportant-text;}娉ㄦ剰锛歋ass杩炲瓧绗?涓庝笅鍒掔嚎_鐩稿悓锛屽嵆@mixinimportant-text{}涓嶡mixinimportant_text{}鏄浉鍚岀殑mixin銆侻ixin鍖呭惈mixin@mixinspecial-text{@includeimportant-text;@includeimportant-color;}mixin浼犲弬mixin鍙互鎺ユ敹鍙傛暟銆侤mixinbordered($color,$width){border:$widthsolid$color;}.my-text{@includebordered(blue,1px);//璋冪敤mixin锛屽苟浼犲叆涓や釜鍙傛暟鏉ヨ绠楄竟妗唥杩欐牱鏄笉鏄洿鍍忎竴涓柟娉曪紵娣峰悎鍙彉鍙傛暟鏈夋椂涓嶈兘纭畾涓€涓猰ix-in闇€瑕佷紶鍏ュ灏戜釜鍙傛暟锛屽彲浠ヤ娇鐢?..銆侤mixinbox-shadow($shadows...){-moz-box-shadow:$shadows;-webkit-box-shadow:$shadows;box-shadow:$shadows;}.shadows{@includebox-shadow(0px4px5px#666,2px6px10px#999);}娴忚鍣ㄥ墠缂€娣风敤娴忚鍣ㄥ墠缂€涔熷緢鏂逛究锛岀敤@mixintransform($property){-webkit-transform:$property;-ms杞崲锛?灞炴€э紱transform:$property;}.myBox{@includetransform(rotate(20deg));}绫讳技鐨勬祻瑙堝櫒鍓嶇紑鏄繀椤荤殑锛丂extendandinheritance鍦℉TML涓紝鎴戜滑鏄笉鏄簲璇ュ啓涓€涓被浼糲lass="button-basicbutton-report"杩欐牱鐨勬爣绛撅紝鏈夌殑鍙兘鏈夊緢澶氾紝鑰屼笖浼氭瘮杈冮暱銆傚彲浠ヤ娇鐢ˊextend閲嶇敤浠ｇ爜銆傝娉旲extend鎸囦护鍛婅瘔Sass閫夋嫨鍣ㄧ殑鏍峰紡鏄粠鍙︿竴涓€夋嫨鍣ㄧ户鎵跨殑銆備娇鐢ㄤ笂涓嬫枃褰撲竴绉嶉鏍间笌鍙︿竴绉嶉鏍煎嚑涔庣浉鍚岃€屽彧鏈変竴浜涚粏寰樊鍒椂浣跨敤@extend銆侲xample.button-basic{杈规锛氭棤锛涘～鍏咃細15px30px锛涙枃鏈榻愶細灞呬腑锛涘瓧浣撳ぇ灏忥細16px锛涘厜鏍囷細鎸囬拡锛泒.button-report{@extend.button-basic;鑳屾櫙鑹诧細绾㈣壊锛泒.button-submit{@extend.button-basic;鑳屾櫙鑹诧細缁胯壊锛沜olor:white;}鍍?button-report杩欐牱鐨勪唬鐮佸垎鏋愰渶瑕佺敤鍒?button-basic鐨勫熀鏈睘鎬э紝鍙互鐩存帴浣跨敤@extend.button-basic鏉ヨ幏鍙栵紝杩欐牱浠ｇ爜鐨勫鐢ㄦ€т細澶уぇ鎻愰珮锛屽苟涓旂粨鏋勪細瓒婃潵瓒婂ソ锛岄殧澹佺殑濂芥湅鍙婬TML涓嶇敤澶╁ぉ鍚冣€滅儰鑲変覆鈥濔煒傘€傛渶鍚庣殑璇濓紝棣栧厛甯屾湜鑷繁鐨凜SS鍐欑殑瓒婃潵瓒婂ソ銆傚叾娆″笇鏈涚湅鍒扮殑pym鍜屾垜涓€鏍凤紝CSS鍐欑殑瓒婃潵瓒婂ソ銆傛瘯绔烻ass鏄€滆僵杈曞墤鈥濓紙Less鏄炕鍊嶏紵锛夋劅璋㈡棤鎵€涓嶈兘鐨勭綉缁滃拰鍔姏鐨勮嚜宸憋紝涓汉鍗氬锛孏itHub娴嬭瘯锛孏itHub鍏紬鍙?榻愬瓙mo锛屽皬绋嬪簭-灏忛鍗氬
