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
Lufthansa ®️ USA Contact Numbers: Complete 2025 Support Guide
lufthanahelpsupport
0
190
面倒な作業はAIにおまかせ。Flutter開発をスマートに効率化
ruideengineer
0
250
How Do I Contact HP Printer Support? [Full 2025 Guide for U.S. Businesses]
harrry1211
0
120
KubeCon + CloudNativeCon Japan 2025 Recap by CA
ponkio_o
PRO
0
300
Glacierだからってコストあきらめてない? / JAWS Meet Glacier Cost
taishin
1
160
OSSのSNSツール「Misskey」をさわってみよう(右下ワイプで私のOSCの20年を振り返ります) / 20250705-osc2025-do
akkiesoft
0
160
PO初心者が考えた ”POらしさ”
nb_rady
0
210
DBのスキルで生き残る技術 - AI時代におけるテーブル設計の勘所
soudai
PRO
48
19k
Reach American Airlines®️ Instantly: 19 Calling Methods for Fast Support in the USA
flyamerican
1
170
LangSmith×Webhook連携で実現するプロンプトドリブンCI/CD
sergicalsix
1
230
Should Our Project Join the CNCF? (Japanese Recap)
whywaita
PRO
0
340
American airlines ®️ USA Contact Numbers: Complete 2025 Support Guide
airhelpsupport
0
380
Featured
See All Featured
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
Rebuilding a faster, lazier Slack
samanthasiow
82
9.1k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
107
19k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.4k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
4 Signs Your Business is Dying
shpigford
184
22k
Visualization
eitanlees
146
16k
Build The Right Thing And Hit Your Dates
maggiecrowley
36
2.8k
Rails Girls Zürich Keynote
gr2m
95
14k
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Ž ᒪӳढ