Preprocessor CSS: عمومي کتنه، انتخاب، د غوښتنلیک

بلکل د ټولو تجربه ويب طرح د preprocessor وکاروي. هیڅ استثنا شتون لري. که تاسو غواړی چې په دې فعالیتونو د بریالي، نه د دغو پروګرامونو په اړه د هېر کوئ. په لومړۍ کتنې، ښايي سبب novice چپ ډارونکی - دا ده چې د پروګرام هم ورته! په حقیقت کې، تاسو کولای شي په اړه د يوې ورځې د پاره سره د CSS preprocessor ټول مشخصات چلند وکړي، او که چېرې تاسو کوښښ، نو د ساعتونو کې يو څو. په راتلونکې کې، دوی د پام وړ به ستاسو د ژوند او ساده کوي.

CSS preprocessor څنګه وکړل

چې د دې تکنالوژۍ د ځانګړنو ښه پوه شي، په لنډه توګه د ويب پاڼې د بصری د پریزنټیشن په تاريخ ته اوچتوي.

کله چې یوازې یوازې د انټرنېټ په پراخه استفاده پيل، سبک نه د سوبتيا شتون نه درلود. د اسنادو د اجرا په لټونګر کې په بشپړه توګه رول ولوباوه. د هغوی هر خپل سبک، چې د ځانګړو نښانونو د درملني لپاره کارول شوي وو. سره سم، د مخونو په کتو سره د نظم په کوم کې چې د کتنمل تاسو يې دابرخه مختلفو وګوري. په پايله کې - د ګډوډي، مغشوش، د پرمختگپالونکي د ستونزې.

په 1994 کال کې، د ناروې د ساینس پوه Håkon درواغو یو ډول پاڼه چې کولی شي د HTML-سند څخه د مخونو د بڼه د جلا کارول شي. د W3C، چې ژر تر ژره تر بشپړیدو څخه جوړ مفکوره priglanulas غړي. څو کاله وروسته هغه د يو د CSS سمتياوې لومړۍ نسخه خپره کړه. بيا د هغې په مکرره توګه ښه شوی دی، حال کې نهايي ... خو د مفهوم پاتې ټول د همدې: د هر ډول د ځانګړو مال جوړ.

CSS جدولونو په کارولو تل ستونزمن شوي دي. د مثال په توګه، د وېب طرح اکثرا سره د ډلبندۍ او ګروپ بڼې ستونزې درلودې، او د ميراث دومره ساده نه ده.

او بيا د دوو یووم راغلل. مارکونه مخ په زياتيدونکي توګه پيل کې د مسلکي مخ-پای پرمختگپالونکي، چې مهمه ده چې د انعطاف او خوځنده کار سبک شي ونډه واخلي. موجود په هغه وخت کې غوښتنه CSS مختاړي دکرلو او تعقیبولو د کتنمل نوې وړتیاوې ملاتړ. بيا، له خوا د جاواسکرېپټ، او ياقوتو کارپوهانو ښکته ته د سوداګرۍ، یو preprocessor رامنځته - د CSS ونښلول، نوې بڼې ته دا زياته دي.

CSS لپاره د لومړنیو: preprocessor ځانګړنې

دوی څو دندې لري:

• کتنمل مختاړي او خاک متحد؛

• العروض ساده؛

• د دې فرصت سره پرته له غلطيو لېنديو ددورې کار ورکوي؛

• منطق آرايشکاه ته وده ورکړي.

په لنډه توګه: د preprocessor CSS پروګرامونو منطق وړتیا زیاتوي. متحولونه، دندو، hagfish، دورو شرایط: اوس، آرايشکاه په معمول لست د سبک او د يو څو ساده تخنیکونو او لارو ترسره نه. سربیره پردې، د وړتیا د رياضي وکاروي.

د دغو add-د تيلې د شهرت په لیدو، د W3C پيل ته په تدريجي ډول د CSS کوډ په د هغوی امکان ډيريږي. د مثال په توګه، په اړه سمتياوې نو هلته calc () دنده، چې د ډېرو د لټوونی ملاتړ دی. دا تمه کیږي چې ډیر ژر به دا ممکن وي چې متحولونه جوړ او يو hagfish رامنځته کړي. په هرصورت، دا به په لرې راتلونکې کې preprocessors لا دلته پېښ شي، او او د لا ښه کار وکړي.

نامتو preprocessors CSS. د SASS

په 2007 کال کې جوړ شوی دی. په اصل کې د يو جز Haml - یو کېنډۍ د HTML. د CSS عناصر د نوي بڼې د ياقوتو په ریل، چې په هرځای کې چې خپور پيل خوند پرمختگپالونکي د کنټرول. د SASS د ځانګړنې دي چې اوس په هر preprocessor شامل ستر شمېر: متحولونه، د ټاکونکي راتاوونه، hagfish (بيا، خو د دې استدالل نه شي کولای).

په SASS اعلان متحولونه

متحولونه اعلان سره د $ نښه. "$ borderSolid: 1px جامد سور؛" دوی کولای شي خپل مال او سټونه د ساتلو، د مثال په توګه. په دې مثال په توګه، موږ د borderSolid په نامه يو متحول اعلان او خوندي دا 1px جامد سور ارزښت. اوس، که په CSS موږ بايد له 1px سور د بريد سور د جوړولو، په ساده ډول په ګوته کوي چې د ملکیت نوم وروسته متحول. د متحولو له اعلان وروسته بدل نه شي. څو جوړ په دندو دي. د مثال په توګه، د يو د $ redcolor # FF5050 ارزښت يو متحول اعلاموي. اوس، د کوم عنصر د ملکیتونو د CSS کوډ په، دا کار د font رنګ وټاکئ: p {رنګ: $ redColor؛ }. تاسو غواړئ چې د رنګ تجربه؟ دنده تتولو استفاده او يا سپک کړي. دا کار دې امله: مخ {رنګ: تتولو ($ redColor، 20٪)؛ }. په پایله کې، د رنګ redColor به 20٪ روښانه وي.

د SASS څو جوړ په دندو. ارزښت لږ تر لږه دوی ته لوستل، خو ښه - د زده کړي.

ځآيونو

پخوا، چې ځآيونو ښيي چې د يو اوږد او د ناراحتۍ ډیزاین وکاروي. تصور چې موږ د يو div، چې د مخ لري، او په هغې کې، په خپل وار، ټاکل شوې موده کې. د div، موږ باید د font رنګ جوړ سور، لپاره د مخ - زيړ، لپاره په اوږدو کې - ګلابي. په یوه عادی CSS دا به په لاندې ډول ترسره شي:

div {

رنګ: سور؛

}

div مخ {

رنګ: زيړ؛

}

div مخ اوږدو {

رنګ: ګلابي؛

}

د CSS preprocessor ټولو آسانه او نور په تړون:

div {

رنګ: سور؛

مخ {

رنګ: زيړ؛

.span {

رنګ: ګلابي؛

}

}

}

عناصرو د لفظي "پانګونه" یو بل.

preprocessor الرښوونې

import الرښوونې په کارولو سره دوتنې کولای وارد کړي. د مثال په توګه، موږ د fonts.sass دوتنه چې د جومونگ د سبک اعلانوي لري. د اصلي دوتنه style.sass دا نښلوي:import 'جومونگ'. وشو! د يو واحد لوی دوتنې سره د سبک پر ځای چې موږ د يو څو، چې کولی شي د اړتیا وړ شتمنيو د چټک او آسانه لاس رسي لپاره کارول شي.

hagfish

د تر ټولو په زړه پورې نظرونه يو. دا یو خط ته د مال ټولګه پوښتنه اجازه ورکوي. په لاندې توګه د فعالیت:

mixin largeFont {

font-کورنۍ: 'نوې ټایمز رومان؛

font-size: 64px؛

کرښه قد: 80px؛

font-وزن: پلن؛

}

Hagfish پر مخ ته عنصر درخواست، د لارښودinclude وکاروي. د مثال په ډول، موږ غواړو تر څو د h1 سرۍ دا درخواست. h1 {include: موږ د لاندې جوړښت لري largeFont؛ }

د hagfish د ټول مال دي یو h1 عنصر ګمارل.

preprocessor لږ

العروض SASS یادونه پروګرام. که تاسو د يوه انتخاب په لټه کې دي چې د ده لپاره د لومړنیو CSS زده زیات مناسب، د لږ وګوري. دا په 2009 کال کې جوړ شو. اصلي ځانګړنه - د CSS مورنۍ العروض ملاتړ، نو سره د پروګرامونو Imposer اشنا دا به د زده آسانه وي.

د متحولونه دي @ سمبول په کارولو سره اعلان کړه. د مثال په توګه:fontSize: 14px؛. په همدغه اصولو ځآيونو کارونو په توګه په SASS. .largeFont () {font-کورنۍ: Hagfish په لاندی توګه اعلان 'نوې ټایمز رومان؛ font-size: 64px؛ کرښه قد: 80px؛ font-وزن: پلن؛ }. د وصل دا ضروري نه ده چې preprocessor الرښوونې وکاروي - یوازې د غوره عنصر د شتمنيو د نوي رامنځته hagfish اضافه کړي. د مثال په توګه: h1 {.largeFont؛ }.

Stylus

بل preprocessor. ورته لیکوال، چې د نړۍ د Jade، Express او نورو ګټورو موادو ورکړه له خوا په 2011 کال کې رامنځ.

متحولونه کولای شي په دوو لارو اعلان شي - صراحت یا ضمني. د مثال په توګه: font = 'نوې ټایمز رومان؛ - د يو ضمني انتخاب. خو $ font = 'نوې ټایمز رومان' - روښانه. Hagfish اعلان شوي دي او ضمني سره نښلول. redColor () رنګ سور: د العروض په لاندې ډول دي. h1 redColor ()؛: اوس موږ کولای شو د توکی اضافه، د مثال په توګه.

Stylus په لومړي نظر دا به نه پوهيدو وړ ښکاري. د "اصلي" قوسونو او semicolons چیرته دی؟ خو دا چې دا ټيټې ضروري ده، د ټولو شي څومره روښانه. په یاد ولرئ، که څه هم، چې د اوږدې مودې لپاره د دې preprocessor پراختیا کوالی شي "پلارله" تاسو د کلاسيک CSS العروض وکاروي. دا کله کله د ستونزو لامل ګرځي لرلو کله چې سره یو "خالص" ډوله کار کوي.

څه preprocessor غوره کړي؟

په حقیقت کې، دا دی ... دا پروا نه کوي. ټول نسخې د همدې ځانګړنې په اړه وړاندې يوازې د هر د العروض مختلف دی. موږ سپارښتنه ته په لاندې توګه وړاندې لاړ:

• که تاسو - پروگرامر او غواړم چې له سبک دواړه په کوډ کار کوي، ګټه د SASS؛
• که تاسو - یو coder او غواړي چې د سره د دوديزې هډوانې په توګه سره د سبک د کار، ته لږ پاملرنه وکړي؛
• که تاسو minimalism په څېر، د Stylus وکاروي.

د د د په زړه پورې کتابتونونو چې کولای شي نور هم پرمختګ ساده ختميدونکې شمیر د ټولو د بېرغونو. سره ډېر جوړ په شکلونو په يوه ځواکمنه وسيله - کارنان SASS سپارښتنه ته پاملرنه د کمپاس ورکړي. د مثال په توګه، وروسته نصب تاسو دا چې تاسو به هيڅکله بايد د پلورونکی نسخه مختاړی په اړه اندېښمن دي. آسانه سره د رسمولو کار وکړي. سره ګلان، sprites کار وسایل شتون لري. يو لړ لا hagfish اعلان کړ. د يو څو ورځو دا وسیله ورکړئ - نو تاسو به د وخت او هڅو ډېر په راتلونکې کې وژغوري.