CSS预处器——Sass、LESS和Stylus实践

Transcript

1. 74 74 ࠡッ Cover Story ᇕ䴶᡹䘧 CSSᇨت૙ഗ˖ Sassǃ LESSࢅStylusํ७ ბࡗCSSڦටۼኪڢLj

   ໲փ๟ᅃዖՊײᇕჾă ੗ᅜ ᆩ໲ਸ݀ྪᄻᄣ๕Lj ڍு݆ᆩ໲Պײă ࣑ਔࣆຫLj CSSएԨฉ๟ยऺ฾ڦ߾ਏLj փ๟ײႾᇵڦ߾ਏă ሞײႾᇵڦᄅ૛Lj CSSՎׯକᅃॲସටཀྵསڦ๚Lj ໲ժփၟഄ໱ײႾᇕჾLjᆶጲमڦՎଉĂཉॲᇕ ਔLjኻ๟ᅃႜႜڇكڦຌႠ௮ຎLjႀഐઠ၎ړݯ ৒Lj ܸ൐پஓవᅜፇኯࢅྼࢺă ࢔ጲ඗ڦLjᆶට৽ਸ๔ሞၙLjీփీၟഄ໱ײ ႾᇕჾᅃᄣLjߴCSSे෇ᅃၵՊײᇮ໎Ljඟ໲ ీၟഄ໱ײႾᇕჾᅃᄣ੗ᅜፔᅃၵᇨۨڦت ૙ăኄᄣᅃઠLj৽ᆶକĐCSSᇨت૙ഗDŽCSS PreprocessorDž đ ă ๊஺๟CSSᇨت૙ഗ CSSᇨت૙ഗۨᅭକᅃዖႎڦᇕჾLjഄएԨາၙ ๟ᆩᅃዖጆோڦՊײᇕჾLjྺCSSሺेକᅃၵՊ ײڦ༬ႠLj ॽCSSፕྺణՔิׯ࿔ॲLj ඗ࢫਸ݀ኁ ৽ኻᄲ๑ᆩኄዖᇕჾ৊ႜՊஓ߾ፕă໲੗ᅜඟే ڦCSSਏԢ߸े०লĂ ๢ᆌႠ߸ഽĂ ੗܁Ⴀ߸ॅĂ ߸ᅟᇀپஓڦྼࢺڪዮܠࡻتă CSSᇨت૙ഗዖૌݏܠǖSassDŽSCSSDžĂLESSĂ StylusĂ TurbineĂ Swithch CSSĂ CSS CacheerĂ DT CSSڪLj ഄዐSassĂ LESSࢅStylus߸๴࠲ጀă ူ௬ॽ ݴ՚ٗ໲்ڦԝৠĂ ᇕ݆Ă ༬Ⴀڪब߲ݛ௬঻ถă SassǃLESSࢅStylusڦԝৠ Sass๟ܔCSSᇕ݆ڦᅃዖક؊Lj ໲ڐิᇀ2007౎Lj ๟ፌራᄺ๟ፌׯຄڦᅃ੼CSSᇨت૙ഗă໲੗ᅜ ๑ᆩՎଉĂ ഴ༫Ă ंࢇĂ ࡧຕڪࠀీLj ᆶၳ൐ᆶڑ Ⴀںႀ؜CSSă ሞ໲ڦᇕ݆ాև੗ᅜ๑ᆩۯༀՎଉ ڪLj ໯ᅜ໲߸ၟᅃዖट०ڇڦۯༀᇕჾă LESSڐิᇀ2009౎Lj ๴SassڦᆖၚডٷLj ๑ᆩCSS ڦᇕ݆Ljඟٷևݴਸ݀ኁࢅยऺ฾߸ඹᅟฉ๮ă LESS༵ࠃକܠዖݛ๕ీೝࣂںॽႀࡻڦپஓገ ࣅׯՔጚڦCSSپஓLjሞ࢔ܠୁႜڦ઀ॐࢅ߾ਏ ዐᅙঢ়ీঢ়׉ੂڟLESSڦวᆖDŽ૩සTwitterڦ Bootstrap઀ॐ৽๑ᆩକLESSDž ă Stylusᇀ2010౎ڐิLjઠጲᇀNode.jsม൶Ljዷᄲ ᆩઠߴNode.jsၜణ৊ႜCSSᇨت૙ኧ׼Ljሞُม ൶ኮాᆶٷଉኧ׼ኁLjڍሞ࠽ݘڦᅪᅭฉටഘ࣏ փසSassࢅLESSă໲ԥ׬ྺ๟ᅃዖ߫ంႠڦႎᇕ ჾLj༵ࠃߛၳĂۯༀĂ๑ᆩ՗ٳݛ๕ઠิׯCSSă Stylusཞ้ኧ׼໫৊ࢅCSS׉ࡀᄣ๕ກႀࡀሶă SassǃLESSࢅStylusڦᇕ݆ ௅ᅃዖᇕჾۼᆶጲमᅃۨڦᇕ݆ࡀሶLjCSSᇨت ૙ഗᇕჾᄺփ૩ྔLj ኵڥ൪႞ڦ๟Lj ኄෙ੼CSSᇨ ت૙ഗᇕჾڦᇕ݆ۼࢅCSSᇕֶ݆փܠă Sassᇕ݆ Sass 3.0ӲԨਸ๔๑ᆩڦ๟ՔጚڦCSSᇕ݆Ljገஓ Վڥ߸ඹᅟă ኟසే໯ੂڟڦLjሞSassᄣ๕ዐLjኄᄣڦپஓ๟ ࿔ / ଘ࿀ࣀ

2. 75 ࠡッ Cover Story ᇕ䴶᡹䘧 ም०ڇփࡗڦକă ዘᄲڦᅃۅ๟LjSassᄺཞ้ኧ׼઻ڦᇕ݆ă઻ڦ ᇕ݆ࢅ׉ࡀڦCSSᇕ݆୼ᆶփཞLjႴᄲჹ߭ڦᇕ ݆Ljඪࢆ໫৊ࢅጴޙڦٱဃۼࣷሰׯᄣ๕ڦՊᅳ ٱဃăSass੗ᅜู୼ٷઔࡽࢅݴࡽLjྜඇᅈ੍ჹ

   ߭ڦ໫৊ࢅ߭๕ࣅپஓă LESSᇕ݆ LESS๟CSSڦᅃዖકቛႚ๕Lj ໲ժுᆶჵߪCSSڦ ࠀీLj ܸ๟ሞ၄ᆶڦCSSᇕ݆ฉLj ཁेକ࢔ܠܮྔ ڦࠀీă৽ᇕ݆ࡀሶܸჾLjLESSࢅSassᅃᄣLjۼ ๟๑ᆩCSSڦՔጚᇕ݆ă Stylusᇕ݆ Stylusڦᇕ݆ࢾᄣܠᅃၵLj໲ڦ࿔ॲકቛఁ๟ Đ.stylđ ă Stylusᄺথ๴ՔጚڦCSSᇕ݆Lj ڍ໲ᄺၟ Sass઻ڦᇕ݆ࡀሶLj ๑ᆩ໫৊੦዆Lj ཞ้Stylusᄺথ ๴փټٷઔࡽࢅݴࡽڦᇕ݆ă ሞStylusᄣ๕ዐLj ేᄺ੗ᅜሞཞᅃ߲ᄣ๕࿔ॲዐ๑ ᆩփཞڦᇕ݆ࡀሶLj ူ௬ኄᄣڦႀ݆ᄺփࣷԒٱǖ SassĂLESSࢅStylus༬Ⴀ ኄෙ੼CSSᇨت૙ഗᇕჾਏᆶᅃၵ၎ཞڦ༬ႠLj ૩ සՎଉĂ ंࢇĂ ഴ༫Ă ࡧຕڪLj থူઠ࿢்ॽᅈْ ܔԲă ՎଉDŽVariablesDž සࡕే๟ᅃ߲ਸ݀ටᇵLjՎଉᆌ޿๟ేፌࡻڦವ ᆷኮᅃă ሞCSSᇨت૙ഗᇕჾዐ੗ᅜำ௽Վଉ DŽ૩ සჿ෥ĂຕኵĂ ࿔ԨڪDž Lj ඗ࢫ੗ᅜሞඪᅪںݛ৊ ႜᆅᆩă Sassำ௽ՎଉՂႷᅜĐ$đਸཀྵLjࢫ௬৆߶Վଉఁ ࢅՎଉኵLjܸ൐ՎଉఁࢅՎଉኵႴᄲ๑ᆩஶࡽݴ ߰ਸLj ৽ၟCSSຌႠยዃᅃᄣă LESSᄣ๕ዐำ௽ՎଉतۙᆩՎଉࢅSassᅃᄣLj ྸ ᅃڦ൶՚৽๟Վଉఁമ௬๑ᆩڦ๟Đ@đጴޙă Stylusᄣ๕ዐำ௽Վଉுᆶඪࢆ၌ۨLj ే੗ᅜ๑ᆩ Đ$đޙࡽਸ๔ă঳࿂ڦݴࡽ੗ᆶ੗࿮LjڍՎଉఁ ࢅՎଉኵኮक़ڦڪࡽ๟ႴᄲڦăෙኁۙᆩՎଉڦ ݛ݆၎ཞă ኻ๟Stylus࣏ᆶᅃ߲܀༬ࠀీǖ փႴᄲ ݴದኵߴՎଉ৽੗ᅜۨᅭᆅᆩຌႠă ࿢்੗ᅜॽԝৠჿ෥Ă ጴ༹ჿ෥Ă Չ઀ຌႠڪ׉ࡀ ᄣ๕ཥᅃۨᅭLj ኄᄣփཞڦዷ༶ኻႴᄲۨᅭփཞڦ Վଉ࿔ॲă ፕᆩᇘDŽScopeDž CSSᇨت૙ഗᇕჾዐڦՎଉࢅഄ໱ײႾᇕჾᅃ ᄣLj ੗ᅜํ၄ኵڦްᆩLj ཞᄣ໲ᄺ٪ሞิంዜ೺Lj ਸ݀ኁသ࠹׬ኮྺፕᆩᇘă Sassዐፕᆩᇘሞኄෙ੼ᇨت૙ഗዐ๟ፌֶڦLj ᅺྺ ுᆶඇਆՎଉڦ߁౒Lj ᅺُසࡕۨᅭକ၎ཞڦՎ ଉఁLj ۙᆩኮ้ഥྤᄲၭ႐ă LESSዐڦፕᆩᇘࢅഄ໱ײႾᇕჾዐڦፕᆩᇘ၎ ৎLjۙᆩ้๯ံֱࣷቴਆևۨᅭڦՎଉLjසࡕு ᆶቴڟLj ࣷၟஶಟᅃᄣLj ᅃपᅃपྫฉֱቴă StylusഐօডྟLj ڍഄፕᆩᇘ༬ႠࢅLESSᅃᄣLj ኧ ׼ඇਆՎଉࢅਆՎଉLj ۙᆩ้ࣷၠฉஶಟֱቴă ंࢇDŽMixinsDž Mixins๟CSSᇨت૙ഗዐፌഽٷڦᇕჾ༬ႠLj ०ڇ ઠຫLjMixins੗ᅜॽᅃևݴᄣ๕؏؜Ljፕྺڇ܀ ۨᅭڦఇ੷Ljԥ࢔ܠ჋ስഗዘް๑ᆩă૩සగ܎ CSSᄣ๕ঢ়׉ᄲᆩڟܠ߲ᇮ໎ዐLj৽Ⴔᄲዘްႀ ܠْă ሞCSSᇨت૙ഗᇕჾዐLj ੗ᅜྺኄၵࠅᆩڦ CSSᄣ๕ۨᅭᅃ߲MixinsLj ඗ࢫሞCSSႴᄲ๑ᆩኄ ၵᄣ๕ڦںݛ኱থۙᆩۨᅭࡻڦMixinsă໲ԥړ

3. 76 76 ࠡッ Cover Story ᇕ䴶᡹䘧 ፕࠅණڦ჋ስഗLj࣏੗ᅜሞഄዐۨᅭՎଉईఐණ ֖ຕă Sassᄣ๕ዐำ௽Mixins้Ⴔᄲ๑ᆩĐ@mixinđ Lj

   ࢫ௬৆߶MixinsఁLj໲ᄺ੗ᅜۨᅭ֖ຕLjཞ้੗ ᅜߴኄ߲֖ຕยዃᅃ߲ఐණኵLjڍ֖ຕఁ๟๑ᆩ Đ$đޙࡽਸ๔Ljժ൐ࢅ֖ຕኵኮक़Ⴔᄲ๑ᆩஶࡽ ݴਸă ሞ჋ስഗۙᆩۨᅭࡻڦMixinsႴᄲ๑ᆩĐ@ includeđ Lj ඗ࢫሞഄࢫ৆߶ᄲۙᆩڦMixinsఁă փ ࡗሞSassዐ࣏ኧ׼઻ڦۙᆩݛ݆Lj৽๟๑ᆩेࡽ Đ+đۙᆩMixinsLj ሞĐ+đ ࢫ৆߶Mixinsఁă ሞLESSዐLjंࢇ๟ኸॽۨᅭࡻڦĐClassAđዐᆅ ෇ଷᅃ߲ᅙঢ়ۨᅭڦĐClassBđLj৽ၟሞړമڦ ĐClassđ ዐሺेᅃ߲ຌႠᅃᄣă փࡗLESSᄣ๕ዐำ௽MixinsࢅSassำ௽ݛ݆փᅃ ᄣLj໲߸ၟCSSۨᅭᄣ๕LjሞLESS੗ᅜॽMixins ੂׯ๟ᅃ߲ૌ჋ስഗLj ړ඗Mixinsᄺ੗ᅜยዃ֖ ຕLjժߴ֖ຕยዃఐණኵăփࡗยዃ֖ຕڦՎଉ ఁ๟๑ᆩ Đ@đਸཀྵLj ཞᄣ֖ຕࢅఐණ֖ຕኵኮक़ Ⴔᄲ๑ᆩஶࡽݴ߰ਸă Stylusዐڦंࢇࢅമଇ੼CSSᇨت૙ഗ୼ᆶփཞLj ੗ᅜփ๑ᆩඪࢆޙࡽLj৽๟኱থำ௽MixinsఁLj ඗ࢫሞۨᅭ֖ຕࢅఐණኵኮक़ᆩڪࡽ૶থă ഴ༫DŽNestingDž ഴ༫๟ኸLjሞᅃ߲჋ስഗዐഴ༫ଷᅃ߲჋ስഗઠ ํ၄ी׶Ljܸٗ३ณپஓଉLjժ൐ሺेକپஓڦ ੗܁Ⴀă૩සLj ሞCSSዐܠ߲ᇮ໎ᆶᅃ߲၎ཞڦ޴ ᇮ໎Ljఫ஺ႀᄣ๕ࣷՎڥ࢔݄࿆LjႴᄲᅃՓᅃՓ ሞ௅߲ᇮ໎മႀኄ߲޴ᇮ໎Ljأݥߴ༬ۨڦᇮ໎ ཁेૌఁ ĐclassđईIDă ၎ݒLj๑ᆩCSSᇨت૙ഗᇕჾڦഴ༫༬ႠLj੗ᅜ ሞ޴ᇮ໎ڦٷઔࡽ૛ႀኄၵᇮ໎ăཞ้੗ᅜ๑ᆩ Đ&đޙࡽઠᆅᆩ޴჋ስഗăܔᇀSassĂLESSࢅ Stylusኄෙ੼CSSᇨت૙ഗᇕჾڦഴ༫჋ስഗઠ ຫLj ໲ۼਏᆶ၎ཞڦᇕ݆ă ी׶DŽInheritanceDž ܔᇀຄဒCSSڦཞბઠຫLj ຌႠी׶ժփఔิă ೝ ้ሞႀCSSᄣ๕׉ಸڟܠ߲ᇮ໎ᆌᆩ၎ཞڦᄣ๕ ้Lj ࿢்ሞCSSዐཚ׉ۼ๟ኄᄣႀǖ ڍྫྫႴᄲߴڇ܀ᇮ໎ཁेଷྔڦᄣ๕Ljኄ้৽ Ⴔᄲӝഄዐڦ჋ስഗڇ܀؜ઠႀᄣ๕Ljසُᅃઠ ྼࢺᄣ๕৽၎ړڦ஑ݑă ྺକ঴ਦኄ߲࿚༶Lj CSS ᇨت૙ഗᇕჾ੗ᅜٗᅃ߲჋ስी׶ଷᅃ߲჋ስഗ ူڦ໯ᆶᄣ๕ă SassࢅStylusڦी׶๟ӝᅃ߲჋ስഗڦ໯ᆶᄣ๕ ी׶ڟଷᅃ߲჋ስഗฉăሞी׶ଷᅃ߲჋ስഗڦ ᄣ๕้Ⴔᄲ๑ᆩ Đ@extendđਸ๔Lj ࢫ௬৆߶ԥी ׶ڦ჋ስഗă LESSኧ׼ڦी׶ࢅSassᇑStylusփᅃᄣLj໱փ๟ ሞ჋ስഗฉी׶Ljܸ๟ॽMixinsዐڦᄣ๕ഴ༫ڟ ௅߲჋ስഗ૛௬ăኄዖݛ݆ڦඍۅ৽๟ሞ௅߲჋ ስഗዐࣷᆶዘްڦᄣ๕ׂิă CSSᇨت૙ഗڦߛपᆌᆩ أକฉ௬঻ถڦ༬ႠኮྔLj࣏ᆶᅃၵ࢔ᆶᆩڦ ༬Ⴀᆶዺᇀ࿢்ڦਸ݀Lj૩සཉॲᇕਔࢅთ࣍ ᇕਔă ཉॲᇕਔ Sassᄣ๕ዐڦཉॲᇕਔࢅഄ໱Պײᇕჾڦཉॲᇕਔ ݥ׉၎ຼLj ሞᄣ๕ዐ੗ᅜ๑ᆩ Đ@ifđ ઠ৊ႜಒ܏ǖ Պᅳ؜ઠڦCSSǖ ሞSassዐཉॲᇕਔ࣏੗ᅜࢅ@else ifĂ @elseದ༫ ๑ᆩǖ Պᅳ؜ઠڦCSSྺǖ

4. 77 ࠡッ Cover Story ᇕ䴶᡹䘧 StylusཉॲᇕਔڦփཞሞᇀLj ໲੗ᅜሞᄣ๕ዐู୼ ٷઔࡽǖ ଷᅃݛ௬Lj ཞᄣᄺ੗ᅜࢅelse

   ifĂelseದ ༫๑ᆩǖ أକኄዖ०ڇڦཉॲᇕਔᆌᆩྔLj Stylus࣏ኧ׼ࢫ ጘཉॲᇕਔăኄ৽ᅪ࿆ጣifࢅunlessDŽຄဒRubyײ Ⴞᇕჾڦ܁ኁᆌ޿ۼኪڢunlessཉॲLj ഄएԨฉᇑ if၎ݒLj Ԩዊฉ๟ Đ(!(expr))đ Dž ړፕ֡ፕޙǗ ړᆸՉ ՗ٳ๕ྺኈ้ኴႜፑՉڦ֡ፕܔၡă LESSڦཉॲᇕਔ๑ᆩᆶၵଷૌLjփ๟࿢்׉९ڦ ࠲॰َifࢅelse ifኮૌLj ܸഄํ၄ݛ๕๟૧ᆩ࠲॰َ Đwhenđ ă ገᅳ؜ઠڦCSSǖ LESSժுᆶཕାሞኄ૛Lj ໲࣏༵ࠃକ࢔ܠૌ႙ॠֱ ࡧຕઠޤዺཉॲ՗ٳ๕Lj ૩සiscolorĂ isnumberĂ isstringĂ iskeywordĂ isurlڪă ଷྔLj LESSڦཉॲ՗ ٳ๕ཞᄣኧ׼ANDࢅORᅜतNOTஇड֡ፕޙઠፇ ࢇཉॲ՗ٳ๕ă თ࣍ᇕਔ SassࢅStylus࣏ኧ׼forთ࣍ᇕਔLjܸLESSժփኧ ׼ăڍኵڥ൪႞ڦ๟Lj ሞLESSዐ੗ᅜ๑ᆩWhenઠ ఇె؜forڦთ࣍༬Ⴀă Sassዐ๑ᆩforთ࣍ᇕਔႴᄲ๑ᆩ@forLjժ൐ದࢇ Đfromđࢅ Đthroughđᅃഐ๑ᆩLj ഄएԨᇕ݆ྺǖ ࿢்ઠੂᅃ߲०ڇڦ૩ጱǖ ገᅳ؜ઠڦCSSپஓǖ أକ@forᇕਔኮྔLj Sass࣏ᆶଷଇዖთ࣍ᇕਔă @eachთ࣍ᇕ݆ǖ @whileڦ๑ᆩࢅഄ໱Պײᇕჾૌຼǖ ገᅳ؜ઠڦCSSྺǖ Stylusዐཚࡗfor/inܔ՗ٳ๕৊ႜთ࣍Lj ႚ๕සူǖ ሞLESSᇕჾዐժுᆶ၄ׯڦთ࣍ᇕਔLjᄺႴᄲ ཚࡗwhenઠఇెă ੗ᅜੂڟLjSassࢅStylusܔཉॲᇕਔࢅთ࣍ᇕਔ ڦت૙ᄲԲLESSᇕჾഽٷăᅺྺ໲்ਏᆶኈኟ ڦᇕჾت૙ీ૰ă ႎरຍټઠڦ཈቟ ྤ࿿ۼᆶᅽᄞଇटLjᆶᇶ৽ᆶඍLjCSSᇨت૙ഗ ᇕჾᄺ༧Նփକኄ߲ࡀୱăCSSᇨت૙ഗᇕჾ๟ ײႾᇵڦ૧ഗLjీཚࡗՊײڦݛ๕Đੵহđت૙ CSS࿚༶ă๑ᆩCSSᇨت૙ഗᇕჾLj྘݆Վڥ߸ߛ पକLjڍཞ้ইگକጲमܔፌዕپஓڦ੦዆૰ă ߸ዂంڦ๟༵ߛକோ५Lj๯ံ๟ฉ๮Ljഄْ๟ྼ ࢺோ५Lj ምઠ๟ཷܓኝ༹຤ೝࢅࡀݔڦோ५ă 㔥ৡ໻⓴ˈⳂࠡկ㘠ѢϞ⍋ᜩ੠㔥㒰⾥ᡔ㾚㾝䆒 䅵䚼ˈҢџWebࠡッ੠᠟ᴎ␌៣Ꮉ԰ˈᇍWebࠡ ッǃ⿏ࡼッǃࠡッḚᶊᢅ᳝⌧८݈䍷DŽ ϾҎमᅶ˖www.w3cplus.comDŽ ᒪӳढ