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
370
CSS预处器——Sass、LESS和Stylus实践
CSS预处器——Sass、LESS和Stylus实践
w3cplus
March 13, 2013
Tweet
Share
More Decks by w3cplus
See All by w3cplus
手淘互动动效探索
w3cplus
0
210
CSS Future
w3cplus
2
610
Web Animation
w3cplus
5
470
CSS3带来的变化
w3cplus
0
1.4k
Web重构之道
w3cplus
1
2.7k
Sass带来的变革
w3cplus
2
570
Responsive小试牛刀
w3cplus
3
540
http协议与缓存简述
w3cplus
5
510
前端自动化工具探索
w3cplus
4
1k
Other Decks in Technology
See All in Technology
ソフトウェアQAがハードウェアの人になったの
mineo_matsuya
3
220
ClaudeCode_vs_GeminiCLI_Terraformで比較してみた
tkikuchi
1
2.5k
「現場で活躍するAIエージェント」を実現するチームと開発プロセス
tkikuchi1002
4
570
OpenTelemetryセマンティック規約の恩恵とMackerel APMにおける活用例 / SRE NEXT 2025
mackerelio
3
2k
アクセスピークを制するオートスケール再設計: 障害を乗り越えKEDAで実現したリソース管理の最適化
myamashii
1
720
安定した基盤システムのためのライブラリ選定
kakehashi
PRO
3
140
Four Keysから始める信頼性の改善 - SRE NEXT 2025
ozakikota
0
420
組織内、組織間の資産保護に必要なアイデンティティ基盤と関連技術の最新動向
fujie
0
320
モニタリング統一への道のり - 分散モニタリングツール統合のためのオブザーバビリティプロジェクト
niftycorp
PRO
1
530
【あのMCPって、どんな処理してるの?】 AWS CDKでの開発で便利なAWS MCP Servers特集
yoshimi0227
6
1k
How to Quickly Call American Airlines®️ U.S. Customer Care : Full Guide
flyaahelpguide
0
240
Deep Security Conference 2025:生成AI時代のセキュリティ監視 /dsc2025-genai-secmon
mizutani
4
3.1k
Featured
See All Featured
Optimizing for Happiness
mojombo
379
70k
Bash Introduction
62gerente
613
210k
The Cult of Friendly URLs
andyhume
79
6.5k
Building a Modern Day E-commerce SEO Strategy
aleyda
42
7.4k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
2.9k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.9k
BBQ
matthewcrist
89
9.7k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.6k
Visualization
eitanlees
146
16k
4 Signs Your Business is Dying
shpigford
184
22k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
21k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.7k
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Ž ᒪӳढ