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
380
CSS预处器——Sass、LESS和Stylus实践
CSS预处器——Sass、LESS和Stylus实践
w3cplus
March 13, 2013
Tweet
Share
More Decks by w3cplus
See All by w3cplus
手淘互动动效探索
w3cplus
0
220
CSS Future
w3cplus
2
620
Web Animation
w3cplus
5
480
CSS3带来的变化
w3cplus
0
1.4k
Web重构之道
w3cplus
1
2.8k
Sass带来的变革
w3cplus
2
590
Responsive小试牛刀
w3cplus
3
540
http协议与缓存简述
w3cplus
5
520
前端自动化工具探索
w3cplus
4
1k
Other Decks in Technology
See All in Technology
Digitization部 紹介資料
sansan33
PRO
1
5.5k
BI ツールはもういらない?Amazon RedShift & MCP Server で試みる新しいデータ分析アプローチ
cdataj
0
150
いまからでも遅くない!SSL/TLS証明書超入門(It's not too late to start! SSL/TLS Certificates: The Absolute Beginner's Guide)
norimuraz
0
230
なぜAWSを活かしきれないのか?技術と組織への処方箋
nrinetcom
PRO
4
850
セキュアな認可付きリモートMCPサーバーをAWSマネージドサービスでつくろう! / Let's build an OAuth protected remote MCP server based on AWS managed services
kaminashi
3
320
HR Force における DWH の併用事例 ~ サービス基盤としての BigQuery / 分析基盤としての Snowflake ~@Cross Data Platforms Meetup #2「BigQueryと愉快な仲間たち」
ryo_suzuki
0
210
AWSでAgentic AIを開発するための前提知識の整理
nasuvitz
2
150
Simplifying Cloud Native app testing across environments with Dapr and Microcks
salaboy
0
150
フレームワークを意識させないワークショップづくり
keigosuda
0
160
AI時代こそ求められる設計力- AWSクラウドデザインパターン3選で信頼性と拡張性を高める-
kenichirokimura
3
310
そのWAFのブロック、どう活かす? サービスを守るための実践的多層防御と思考法 / WAF blocks defense decision
kaminashi
0
200
アイテムレビュー機能導入からの学びと改善
zozotech
PRO
0
140
Featured
See All Featured
The Cult of Friendly URLs
andyhume
79
6.6k
Fireside Chat
paigeccino
40
3.7k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
52
5.6k
How To Stay Up To Date on Web Technology
chriscoyier
791
250k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
How GitHub (no longer) Works
holman
315
140k
A Modern Web Designer's Workflow
chriscoyier
697
190k
Balancing Empowerment & Direction
lara
4
690
Learning to Love Humans: Emotional Interface Design
aarron
274
41k
Reflections from 52 weeks, 52 projects
jeffersonlam
353
21k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3.1k
Being A Developer After 40
akosma
91
590k
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Ž ᒪӳढ