Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
CSS预处器——Sass、LESS和Stylus实践
Search
w3cplus
March 13, 2013
Technology
0
340
CSS预处器——Sass、LESS和Stylus实践
CSS预处器——Sass、LESS和Stylus实践
w3cplus
March 13, 2013
Tweet
Share
More Decks by w3cplus
See All by w3cplus
手淘互动动效探索
w3cplus
0
170
CSS Future
w3cplus
2
550
Web Animation
w3cplus
5
430
CSS3带来的变化
w3cplus
0
1.3k
Web重构之道
w3cplus
1
2.6k
Sass带来的变革
w3cplus
2
480
Responsive小试牛刀
w3cplus
3
500
http协议与缓存简述
w3cplus
5
490
前端自动化工具探索
w3cplus
4
910
Other Decks in Technology
See All in Technology
コンテナセキュリティの基本と脅威への対策
kyohmizu
3
690
レガシーをぶっ壊せ。AEONで始めるDevRelの話 / Qiita Night 2024-2-22
aeonpeople
3
150
プロトタイピングによる不確実性の低減 / Reducing Uncertainty through Prototyping
ohbarye
3
230
Tebiki株式会社 エンジニア採用資料
tebiki
0
4.1k
クラウドサインにおけるプロダクトマネージャーの役割と開発プロセス / 20240410_cloudsign-PdM
bengo4com
1
680
AIQ株式会社 エンジニア向け会社紹介資料
aiqlab
0
370
「共通基盤」を超えよ! 今、Platform Engineeringに取り組むべき理由
jacopen
25
5.8k
20240416_devopsdaystokyo
kzkmaeda
1
190
Apple Vision Pro trial session
akkeylab
0
120
SIEMを用いて、セキュリティログ分析の可視化と分析を実現し、PDCAサイクルを回してみた
coconala_engineer
0
220
Janus
bkuhlmann
1
490
反実仮想機械学習とは何か
usaito
PRO
6
2.1k
Featured
See All Featured
Rails Girls Zürich Keynote
gr2m
91
13k
Facilitating Awesome Meetings
lara
41
5.6k
How STYLIGHT went responsive
nonsquared
92
4.8k
YesSQL, Process and Tooling at Scale
rocio
163
13k
Atom: Resistance is Futile
akmur
258
25k
Fantastic passwords and where to find them - at NoRuKo
philnash
36
2.5k
WebSockets: Embracing the real-time Web
robhawkes
59
7k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
356
22k
Rebuilding a faster, lazier Slack
samanthasiow
72
8.2k
Writing Fast Ruby
sferik
620
60k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
501
140k
Building Better People: How to give real-time feedback that sticks.
wjessup
354
18k
Transcript
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 ڐิᇀ2007Lj ፌራᄺፌׯຄڦᅃCSSᇨتഗăᅜ ๑ᆩՎଉĂ ഴ༫Ă ंࢇĂ ࡧຕڪࠀీLj ᆶၳᆶڑ ႠںႀCSSă ሞڦᇕ݆ాևᅜ๑ᆩۯༀՎଉ ڪLj ᅜ߸ၟᅃዖट०ڇڦۯༀᇕჾă LESSڐิᇀ2009Lj 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ኄᄣڦپஓ ࿔ / ଘ࿀ࣀ
75 ࠡッ Cover Story ᇕ䴶䘧 ም०ڇփࡗڦକă ዘᄲڦᅃۅLjSassᄺཞ้ኧڦᇕ݆ăڦ ᇕ݆ࢅࡀڦCSSᇕ݆ᆶփཞLjႴᄲჹ߭ڦᇕ ݆Ljඪࢆࢅጴޙڦٱဃۼࣷሰׯᄣ๕ڦՊᅳ ٱဃăSassᅜูٷઔࡽࢅݴࡽLjྜඇᅈ੍ჹ
߭ڦࢅ߭๕ࣅپஓă LESSᇕ݆ LESSCSSڦᅃዖકቛႚ๕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ž MixinsCSSᇨتഗዐፌഽٷڦᇕჾ༬ႠLj ०ڇ ઠຫLjMixinsᅜॽᅃևݴᄣ๕؏Ljፕྺڇ܀ ۨᅭڦఇLjԥܠስഗዘް๑ᆩă૩සగ CSSᄣ๕ঢ়ᄲᆩڟܠ߲ᇮ໎ዐLj৽Ⴔᄲዘްႀ ܠْă ሞCSSᇨتഗᇕჾዐLj ᅜྺኄၵࠅᆩڦ CSSᄣ๕ۨᅭᅃ߲MixinsLj ࢫሞCSSႴᄲ๑ᆩኄ ၵᄣ๕ڦںݛথۙᆩۨᅭࡻڦMixinsăԥړ
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ྺǖ
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Ž ᒪӳढ