Preprocessor CSS: خلاصو، چونڊ، درخواست

بلڪل سڀ تجربا ڪري ويب دارو مدار جي preprocessor استعمال. ڪو پاسو آهي. توهان هن سرگرمي ۾ ڪامياب ڪرڻ چاهيو ٿا ته، انهن پروگرامن جي باري ۾ نه وساريو. پهرين نظر ۾، اهي هڪ novice پهر رعب سبب ڪري سگهون ٿا - ته ان کي به سنڌ جي پروگرامن سان ملندڙ جلندڙ آهي! حقيقت ۾، اوھان CSS preprocessor جي سڀني خاصيتن سان هڪ ڏينهن جي باري ۾ لاء وري ڪلاڪن جو هڪ جوڙو سودا ڪري سگهن ٿا، ۽ تون ڪوشش ته،. مستقبل ۾، اهي بامعني پنهنجي زندگي simplify ٿيندو.

ڪيئن CSS preprocessor ڪيو

ڀلا هن ٽيڪنالاجي جي ڪنڀار کي سمجهڻ لاء، مختصر طور صفحا جي ڏسڻ جي بريفنگ جي تاريخ ۾ Delve.

صرف صرف انٽرنيٽ جي تمام وڏا استعمال شروع جڏهن، ڪو طرز جا پردا موجود نه ھو. دستاويز جي لاء برائوزر تي معنى منحصر هئي. انهن مان هر هڪ پنهنجي انداز آهي، جنهن کي ڪجهه ٽيگ جي علاج لاء استعمال ڪيو ويو آهي هئا. مطابق، جي صفحن تي جنهن ۾ برائوزر اوھين انھن کي کولڻ جي حڪم تي منحصر ڪري مختلف نظر. نتيجو - جي چاهين، مونجهارو، ڊولپر جي لاء پريشاني.

1994 ع ۾، نارو سائنسدان Håkon ڪوڙ هڪ انداز چادر ته HTML-سند کان الڳ صفحن جي ظاهر ڪرڻ لاء استعمال ٿي سگهي ٿو اڀري. جي W3C جي خيال priglanulas ميمبرن، جن کي فوري طور تي مڪمل ڪرڻ لاء نڪتا. ٿورن سالن کان پوء هن جي CSS specification جو پهريون نسخو شايع ڪيو. ان کان پوء هوء مسلسل بهتر ڪيو ويو، ٺهيو پيو وڃي ... پر مفهوم سڀني جو ساڳيو رهيو: هر انداز ڪجهه مال قائم.

CSS ٽيبل استعمال ڪري هميشه سگهندي ڪئي وئي آهي. مثال طور، ويب دارو مدار اڪثر فيصلو ۽ خصوصيتون grouping سان مسئلا هئا، ۽ وارث ايترو سادو نه آهي.

۽ ان کان پوء ٻه thousandth آيو. محدود increasingly ور سامهون-آخر ڊولپر ۾ مشغول ٿيڻ لڳو آهي، جنهن جي لچڪدار ۽ متحرڪ ڪم جو انداز ٿيڻ لاء اهم آهي. هن وقت وجود ۾ مطالبو ڪيو CSS رکڻ پريفڪس ۽ ٽريڪ ڪاري جي برائوزر جي نئين صلاحيتون جي حمايت. ان کان پوء، JavaScript جي، ۽ روبي جي ماهرن جو ڪاروبار ڪرڻ لاء نازل روانو ٿيو، هڪ preprocessor ٺاهڻ - CSS جي لاء سپر، نئين خاصيتون ان ۾ شامل ٿي رهيا آهن.

نئين سکندڙن لاء CSS: preprocessor خاصيتون

اهي ڪيترن ئي ڪم آهي:

• برائوزر پريفڪس ۽ خاکی جمي؛

• نحو simplify؛

• غلطيون کان سواء nested selectors سان ڪم ڪرڻ جو موقعو ڏي.

• منطق تي مهمان طور بهتر.

مختصر ۾: سنڌ جي preprocessor CSS پروگرامن منطق صلاحيتون وڌائيندو آھي. هاڻي، مهمان طور انداز جي ويچارا فهرست ۾ ۽ چند سادي طريقن سان پرفارم ڪيو آهي نه ۽ پڙهجي: variables، ڪم، hagfish، cycles حالتون. ان کان سواء، چيڪلو استعمال ڪرڻ جي صلاحيت.

انهن شامل پلگ ان جي مقبوليت ڏسي، ته W3C جتان جي CSS ڪوڊ ۾ انھن جو امڪان شامل ڪرڻ شروع ڪيو آهي. مثال طور، سنڌ جي specification ۾ ائين نه calc () فعل آهي، جنهن کي ڪيترن ئي برائوزر سان معاونت آهي. اها اميد آهي ته جلد ان variables قائم ۽ هڪ hagfish پيدا ڪرڻ ممڪن ٿي ويندي. تنهن هوندي به هن جي پنڌ تي مستقبل ۾ ايڏو وڏو ٿيندو، ۽ preprocessors اڳ ۾ ئي هتي ۽ اڳ ۾ ئي چڱي ڪم.

مشهور preprocessors CSS. Sass

2007 ع ۾ ٺهيل. اصل هڪ اتحادي Haml - هڪ سانچي HTML. CSS عنصرن لاء نئون خاصيتن جي روبي تي ريل جي، جنهن ان هر پکڙيل ڪرڻ لڳو تي relished ڊولپر ڪنٽرول. هن Sass ته هاڻي ڪنهن به preprocessor ۾ شامل آهن مضمونن جي هڪ وڏي تعداد: variables، selectors جي embedding، hagfish (پوء، تنهن هوندي به، انهن دليلن ۾ شامل نه ٿو ڪري سگهجي).

Sass ۾ اعلان variables

Variables جي $ سائين سان قرار ڏنو. اهي مثال طور، پنھنجن مالن ۽ بيان کي برقرار رکڻ ڪري سگهو ٿا: "$ borderSolid: 1px بيڪار لال؛". هن مثال ۾، اسين هڪ variable borderSolid سڏيو قرار ڏنو ۽ ان کي 1px بيڪار لال قدر بچايو. هاڻي، جي CSS اسان 1px جي هڪ ڳاڙهي سرحد کائيندڙ پيدا ڪرڻ جي ضرورت ۾ جيڪڏهن چئجي ته variable جي ملڪيت جي نالي کان پوء اشارو. جي variables جي اعلان کان پوء تبديل نه ٿو ڪري سگهجي. اتي ڪيترن ئي تعمير ۾ ڪم آهن. مثال طور، $ redcolor # FF5050 جي اهميت سان گڏ هڪ variable اعلان. هاڻي، ڪنهن به عنصر جي مال ۾ CSS ڪوڊ ۾، ان کي استعمال ڪرڻ جي اکرن جو رنگ قائم ڪرڻ: ص {رنگ: $ redColor؛ }. توهان جي رنگ سان تجربن جي چاھيو ٿا؟ فنڪشن کي استعمال darken يا ھلڪو. هن ائين ڪيو آهي: ص {رنگ: darken ($ redColor، 20٪)؛ }. نتيجي ۾، رنگ redColor 20٪ lighter ٿي ويندي.

هن Sass ڪيترن ئي تعمير ۾ ڪم ڪرڻ. رپين جي گهٽ ۾ گهٽ انهن کي پڙهي، پر چڱو - سکڻ لاء.

nesting

عربن، nesting ظاهر ڪرڻ لاء هڪ ڊگهي ۽ مضطرب جوڙجڪ لاء استعمال ڪرڻ لڳو. تصور آهي ته اسان کي هڪ div، جنهن ص آهي، ۽ ان ۾، موڙ ۾، جي وٿيء تي مقرر. پيلو، جي وٿيء لاء - - گلابي جي div لاء، اسان جي اکرن جو رنگ ڳاڙهو، ص لاء مقرر ڪرڻ جي ضرورت آهي. هڪ عام CSS ۾ ان جي تابعداري طور ڪيو ويندو هوس:

div {

رنگ: لال؛

}

div ص {

رنگ: پيلو؛

}

div ص جي وٿيء {

رنگ: گلابي؛

}

CSS preprocessor سان تمام آسان ۽ وڌيڪ انجام ٿيندو:

div {

رنگ: لال؛

ص {

رنگ: پيلو؛

.span {

رنگ: گلابي؛

}

}

}

عناصر لفظي ھڪ ٻئي کي "invested".

preprocessor هدايت

import هدايت استعمال ڪري فائلون درآمد ڪري سگهن ٿا. مثال طور، اسان fonts.sass فائيل ته فانٽ لاء موزون تڪرار ڪيو آهي. ان جو مکيه فائيل style.sass کي ڳنڍڻ:import 'فانٽ'. ڪاش! بجاء ان جي جو انداز اسان کي ڪجھه ته گهري مال ڪرڻ لاء تڪڙا ۽ آسان رسائي لاء استعمال ڪري سگهجي ٿو ڪيو سان ھڪ وڏي فائيل جي.

hagfish

سڀ کان دلچسپ خيالن جي هڪ. اهو هڪ ليڪ مال جي هڪ سيٽ پڇا ڳاڇا ڪرڻ جي اجازت ڏئي ٿو. ھلي طور هلائڻ:

largeFont {mixin

اکرن-خاندان: 'وقت نئون رومي'؛

اکرن-سائيز: 64px؛

ڪنڊي-اوچائي: 80px؛

اکرن-وزن: جلي؛

}

هن صفحي تي ئي هدايت تي لاڳو ڪرڻ، هدايت تيinclude استعمال Hagfish. مثال طور، اسان جي H1 صحافت جي لاء ان کي لاڳو ڪرڻ چاهيو ٿا. H1 {include:: اسان کي هيٺين ريت جوڙجڪ ڪئي largeFont؛ }

hagfish جو سڀ مال هڪ H1 هدايت لڳايو ويو آهي.

preprocessor وگهيو

نحو Sass پروگرامن recalls. اوھان کي ڳولي رهيا آهن ته CSS زير تعليم نئين سکندڙن لاء وڌيڪ مناسب آهي ته هڪ اختيار جي لاء، گھٽ لاء ڏسو. اهو 2009 ع ۾ پيدا ٿيو. هن جو مکيه مضمون - CSS ڏيهي نحو جي حمايت، پوء مانوس پروگرامن Imposer سان ان کي سکڻ آسان ٿي ويندي.

هن variables جو @ علامت کي استعمال ڪندي قرار ڏنو آهي. مثال طور:fontSize: 14px؛. Sass ۾ به ساڳيو اصول تي ڪم Nesting. Hagfish جي پٺيان جيئن جو اعلان ڪري رهيا آهن: .largeFont () {اکرن-خاندان: 'وقت نئون رومي'؛ اکرن-سائيز: 64px؛ ڪنڊي-اوچائي: 80px؛ اکرن-وزن: جلي؛ }. صرف هن چونڊيل هدايت جي مال ۾ هڪ خودمختيار بڻايو hagfish شامل - ان کي ڳنڍڻ preprocessor هدايت استعمال ڪرڻ ضروري نه آهي. مثال طور: .largeFont H1 {؛ }.

Stylus

ٻئي preprocessor. اهو ساڳيو ليکڪ طرفان 2011 ع ۾ پيدا ٿي، ته دنيا جي Jade، ايڪسپريس ۽ ٻين مفيد شين ڏني.

Variables ٻن طريقن ۾ قرار ڏنو وڃي سگهو ٿا - يا ته چٽي يا implicitly. مثال طور: اکرن = 'وقت نئون رومي'؛ - هڪ implicit اختيار. پر $ اکرن = 'وقت نئون رومي' - پڌري. Hagfish قرار ڏنو آهي ۽ implicitly ڳنڍيل. هن نحو ڏنل آهي: redColor () جو رنگ ڳاڙهو. هاڻي اسان کي مثال طور، هن شيء کي شامل ڪري سگهو ٿا: H1 redColor ().

پهريون ڀيرو چتائي ان incomprehensible لڳي سگهي ٿو پر Stylus. ڪٿي "ڏيهي" brackets ۽ semicolons آهي؟ پر ان کي ان ۾ ٺاھيندو ڪرڻ ضروري آهي، تمام گهڻو چٽو ٿيندو. ياد رهي، تنهن هوندي به، ته هن preprocessor جي ڊگهي-مدت ترقي "wean" توهان جي شاندار CSS نحو استعمال ڪري سگهو ٿا. جڏهن هڪ "خالص" انداز سان ڪم ڪرڻ گذارڻ هن ڪڏهن ڪڏهن مشڪلاتن کي ماري.

ڇا preprocessor چونڊي؟

حقيقت ۾، ان آهي ... ان کي ڪوئي نه رکندو آھي. سڀني نسخن ۾ ساڳي ئي خوبيون صرف هر جي نحوي مختلف آهي جي باري ۾ پيش ڪرڻ. اسان جي پٺيان جيئن اڳتي ڪرڻ جي صلاح:

• جيڪڏھن اوھين - پروگرامر ۽ ٻنهي ڪوڊ ۾ انداز سان ڪم ڪرڻ چاهيو ٿا، ته Sass استعمال؛
• جيڪڏھن اوھين - هڪ coder ۽ رائج الوقت واري ترتيب سان جيئن جو انداز سان ڪم ڪرڻ چاهيو ٿا، ان جي گهٽ ڌيان ڏيڻ؛
• جيڪڏھن اوھين minimalism پسند، جي Stylus استعمال.

دلچسپ لائبريريون ته وڌيڪ به ترقي simplify ڪري سگهو ٿا جي اڻ کٽ تعداد جي موڪليل variants لاء. ڪيترن ئي تعمير-۾ خاصيتن سان هڪ طاقتور اوزار - صارفين Sass قطب نما کي ڌيان ڏيڻ جي صلاح ڏني. مثال طور، توهان ان کي انسٽال ٿيڻ کان پوء توهان جي باري ۾ ڪم ڪندڙ نسخو (پريفڪس) الحروف وٽ موجود آهن ڪڏهن به نه ٿيندو. Simplifies grids سان ڪم. نه گلن جي، sprites سان ڪم ڪرڻ لاء اوزار آهن. هڪ حد کان اڳ hagfish جو اعلان ڪيو. هن اوزار جي ڏينهن جو هڪ جوڙو ڏيو - اھڙي طرح اوھان کي مستقبل ۾ وقت ۽ ڪوشش جو تمام گهڻو محفوظ ڪندو.