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
210
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
Goを使ってTDDを体験しよう!
chiroruxx
1
240
全てGoで作るP2P対戦ゲーム入門
ponyo877
3
1.3k
10年の共創が示す、これからの開発者と企業の関係 ~ Crossroad
soracom
PRO
1
110
SoccerNet GSRの紹介と技術応用:選手視点映像を提供するサッカー作戦盤ツール
mixi_engineers
PRO
1
150
pprof vs runtime/trace (FlightRecorder)
task4233
0
140
“2件同時配達”の開発舞台裏 〜出前館PMが挑んだダブルピック実現に向けた体験設計〜
demaecan
0
170
Modern_Data_Stack最新動向クイズ_買収_AI_激動の2025年_.pdf
sagara
0
170
#普通の文系サラリーマンチャレンジ 自分でアプリ開発と電子工作を続けたら人生が変わった
tatsuya1970
0
890
フルカイテン株式会社 エンジニア向け採用資料
fullkaiten
0
9k
PythonとLLMで挑む、 4コマ漫画の構造化データ化
esuji5
1
120
KMP の Swift export
kokihirokawa
0
280
Green Tea Garbage Collector の今
zchee
PRO
2
370
Featured
See All Featured
The World Runs on Bad Software
bkeepers
PRO
71
11k
GraphQLの誤解/rethinking-graphql
sonatard
72
11k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
127
53k
Code Review Best Practice
trishagee
72
19k
Designing for humans not robots
tammielis
254
25k
Being A Developer After 40
akosma
91
590k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.6k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
114
20k
Speed Design
sergeychernyshev
32
1.1k
The Cost Of JavaScript in 2023
addyosmani
53
9k
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Ž ᒪӳढ