پریپروسیسر CSS: جائزہ، انتخاب، درخواست

بالکل تمام تجربہ کار ویب ڈیزائنرز پریپروسیسر استعمال کرتے ہیں. کوئی رعایت نہیں ہیں. آپ کو اس سرگرمی میں کامیاب ہونے کے لئے چاہتے ہیں، ان پروگراموں کے بارے میں مت بھولنا. پہلی نظر میں، وہ ایک نوسکھئیے خاموش ہیبت کی وجہ سے ہو سکتا ہے - جو پروگرامنگ کے لئے بہت ملتا جلتا ہے! اصل میں، آپ کے بارے میں ایک دن کے لئے سی ایس ایس پریپروسیسر کی تمام خصوصیات کے ساتھ نمٹنے کے، اور کر سکتے ہیں اگر تم کوشش کرو، اس کے بعد گھنٹے کے ایک جوڑے. مستقبل میں، وہ نمایاں طور پر آپ کی زندگی آسان بنانے گا.

کس طرح CSS پریپروسیسر کیا

بہتر اس ٹیکنالوجی کی خصوصیات کو سمجھنے کے لئے، مختصر طور پر ویب صفحات کی بصری پیش کی تاریخ میں delve.

صرف صرف انٹرنیٹ کا بڑے پیمانے پر استعمال شروع کر دیا جب، کوئی سٹائل شیٹس موجود ہی نہیں تھی. دستاویزات کی پھانسی کے براؤزر پر مکمل طور پر انحصار. ان میں سے ہر بعض ٹیگز کے علاج کے لیے استعمال کیا گیا ہے جس میں ان کے اپنے سٹائل، تھا. اس کے مطابق، صفحات جس میں براؤزر کے آپ ان کو کھولنے کے لئے پر منحصر ہے مختلف نظر آتے ہیں. نتیجہ - ڈویلپرز کے لئے افراتفری، الجھن، مسائل.

1994 میں ناروے سائنسدان Håkon جھوٹ HTML-دستاویز سے الگ الگ صفحات کے ظہور کے لئے استعمال کیا جا سکتا ہے کہ ایک سٹائل شیٹ تیار کی. فوری طور پر تکمیل کے لئے باہر قائم ہے جو W3C، کے خیال priglanulas ارکان. چند سال کے بعد وہ CSS تصریح کی ایک پہلے ورژن شائع کیا. اس کے بعد وہ مسلسل بہتر کیا گیا تھا کو حتمی شکل دی جا رہی ... لیکن تصور تمام ایک ہی رہے: ہر سٹائل کے بعض خواص سیٹ.

CSS میزیں کا استعمال کرتے ہوئے ہمیشہ مشکلات رہی ہے. مثال کے طور پر ویب ڈیزائنرز اکثر خصوصیات کو چھانٹ رہا ہے اور گروہ بندی کے ساتھ مسائل تھے، اور میراث اتنا آسان نہیں ہے.

اور پھر دو ہزارویں آیا. نشان تیزی لچکدار اور متحرک کام کی سٹائل ہونا ضروری ہے جس میں پیشہ ورانہ سامنے کے آخر ڈویلپرز، میں مشغول کرنا شروع کر دیا جاتا ہے. وقت کا مطالبہ CSS سابقے جگہ کا تعین کرنے پر موجود ہے اور سے باخبر رہنے کے کی حمایت کے براؤزر کی نئی صلاحیتوں. اس کے بعد، سکرپٹ کی طرف سے، اور روبی ماہرین کاروبار کے لئے نیچے، ایک پریپروسیسر پیدا ہو گیا - سی ایس ایس کے لئے ساخت، نئی خصوصیات اس میں شامل کر رہے ہیں.

Beginners کے لیے CSS: پریپروسیسر کی خصوصیات

انہوں نے کئی کام کرتا ہے:

• براؤزر سابقے اور خاکی کو یکجا؛

• نحو کو آسان بنانے کے؛

• غلطیوں کے بغیر اندر در اندر سلیکٹرز کے ساتھ کام کرنے کا موقع دے.

• منطق اسٹائل بہتر بنانے کے.

مختصر میں: پریپروسیسر CSS پروگرامنگ کی منطق کی صلاحیتوں کا اضافہ کر دیتی. متغیر، افعال، hagfish، سائیکل حالات: اب، اسٹائل شیلیوں کی معمول کی لسٹنگ میں اور کچھ آسان تکنیک اور نقطہ نظر کے ساتھ کارکردگی کا مظاہرہ نہیں کر رہا ہے. اس کے علاوہ، ریاضی کو استعمال کرنے کی صلاحیت.

ان میں اضافہ ان کی مقبولیت کو دیکھ کر، W3C بتدریج سی ایس ایس کوڈ میں ان کے امکان کو شامل کرنے کے لئے شروع کر دیا ہے. مثال کے طور پر تفصیلات میں تو وہاں حساب () تقریب، بہت سے براؤزر کی طرف سے حمایت کی ہے جس میں. توقع ہے کہ جلد ہی اس متغیر مقرر اور ایک hagfish پیدا کرنے کے لئے ممکن ہو جائے گا. تاہم، یہ پہلے سے ہی یہاں preprocessors مستقبل بعید میں ہو جائے گا، اور اور پہلے ہی اچھی طرح کام.

پاپولر preprocessors سی ایس ایس. SASS

2007 میں ڈیزائن کیا گیا. اصل ایک جزو HAML - ایک سانچے HTML. سی ایس ایس عناصر کے لئے نئی خصوصیات ہر جگہ یہ پھیلانے شروع کر دیا ہے جس میں پٹریوں پر روبی، پر relished کیا ڈویلپرز کنٹرول کرتے ہیں. Sass کے اب کسی بھی پریپروسیسر میں شامل ہیں کہ خصوصیات کی ایک بڑی تعداد کی: سلیکٹرز کی سرایت متغیر، hagfish (اس وقت، تاہم، ان دلائل شامل نہیں کیا جا سکتا ہے).

SASS میں اعلان متغیر

متغیر $ علامت کے ساتھ اعلان کر دیا. "$ borderSolid: کریں 1px ٹھوس سرخ؛" انہوں نے مثال کے طور پر ان کی خصوصیات اور سیٹ کو برقرار رکھنے کے کر سکتے ہیں. اس مثال میں، ہم borderSolid نامی ایک متغیر کا اعلان کر دیا ہے اور یہ کریں 1px ٹھوس سرخ قدر بچا لیا. اب، اگر سی ایس ایس میں ہم کریں 1px کے ایک سرخ سرحد کی چوڑائی بنانے کی ضرورت ہے، صرف جائیداد نام کے بعد اس متغیر کی طرف اشارہ کرتا. متغیر کے اعلان کے بعد تبدیل نہیں کیا جا سکتا. کئی بلٹ میں افعال ہیں. مثال کے طور پر $ redcolor # FF5050 کی قیمت کے ساتھ ایک متغیر کا اعلان. P {رنگ: اب، کسی بھی عنصر کی خصوصیات میں سی ایس ایس کوڈ میں، فونٹ کا رنگ قائم کرنے کے لئے اس کا استعمال $ redColor؛ }. آپ کو رنگ کے ساتھ استعمال کرنا چاہتے ہیں؟ تقریب گہرے رنگ کا استعمال کریں یا ہلکا. یہ اتنا کیا جاتا ہے: P {رنگ: سیاہ کرنا ($ redColor، 20٪)؛ }. نتیجے کے طور پر، رنگ redColor 20 فیصد ہلکا ہو جائے گا.

Sass کے بہت سے بلٹ میں کام کرتا ہے. کم از کم ان کو پڑھنے کے قابل، لیکن بہتر - سیکھنے کے لئے.

نیسٹنگ

اس سے قبل، nesting کے اس بات کی نشاندہی کرنے کے لئے ایک طویل اور غیر آرام دہ ڈیزائن کا استعمال کرنا پڑا. ہم پی ہے جو ایک div ہے کہ ذرا تصور کریں، اور اس میں، کے نتیجے میں، مقرر مدت. ، پیلے دورانیہ کے لئے - - div کے لئے، ہم پی کے، سرخ فونٹ کا رنگ قائم کرنے کی ضرورت گلابی. ایک عام سی ایس ایس میں یہ مندرجہ ذیل کے طور پر کیا جائے گا:

div کے {

رنگین: سرخ،

}

div کے پی {

رنگین: پیلے رنگ،

}

div کے پی کا دورانیہ {

رنگین: گلابی،

}

سی ایس ایس پریپروسیسر کے ساتھ تمام آسان اور زیادہ کمپیکٹ بن جاتا ہے:

div کے {

رنگین: سرخ،

P {

رنگین: پیلے رنگ،

.span {

رنگین: گلابی،

}

}

}

عناصر لفظی ایک دوسرے کو "سرمایہ کاری".

پریپروسیسر ہدایت

فائلوں کو درآمد کر سکتے @ درآمد کی ہدایات کا استعمال کرتے ہوئے. مثلا، ہم فونٹس کے لئے شیلیوں کا اعلان ہے کہ fonts.sass فائل ہے. اہم فائل style.sass کو اس کی جڑیں: @ درآمد 'فونٹ'. ہو گیا! سٹائل کے ساتھ ایک بڑی فائل کی بجائے ہم چند مطلوبہ خواص کے لئے فوری اور آسان رسائی کے لئے استعمال کیا جا سکتا ہے کہ ہے.

hagfish

سب سے زیادہ دلچسپ خیالات کے ایک. یہ خصوصیات میں سے ایک سیٹ سے پوچھنا ایک لائن کی اجازت دیتا ہے. مندرجہ ذیل کے طور پر کام:

mixin largeFont {

فونٹ خاندان: 'ٹائمز نیو رومن'؛

فونٹ سائز: 64px؛

لائن اونچائی: 80px؛

فونٹ وزن: جرات مندانہ؛

}

، صفحے پر عنصر پر لاگو کرنا Hagfish ہدایتinclude استعمال کرتے ہیں. مثلا، ہم H1 ہیڈر پر لاگو کرنا چاہتے ہیں. H1 {include: ہم نے مندرجہ ذیل کی ساخت ہے largeFont؛ }

hagfish کی تمام خصوصیات کو ایک H1 عنصر تفویض کر رہے ہیں.

پریپروسیسر کم

نحو Sass کے پروگراموں یاد کرتے ہیں. اگر آپ کو ایک آپشن کے لئے تلاش کر رہے ہیں تو کہ سی ایس ایس کا مطالعہ beginners کے لئے زیادہ مناسب ہے، کم کے لئے لگ رہے ہو. اس نے 2009 میں بنایا گیا تھا. مین کو نمایاں کریں - پروگرامنگ Imposer ساتھ اتنے ناواقف CSS اسے نحو کے لئے حمایت ہے، یہ جاننے کے لئے آسان ہو جائے گا.

متغیر @ علامت کا استعمال کرتے ہوئے قرار دیا جاتا ہے. مثال کے طور پر:fontSize: 14px کے؛ Sass کے طور پر ایک ہی اصولوں پر nesting کام کرتا ہے. .largeFont () {فونٹ خاندان: مندرجہ ذیل کے طور Hagfish اعلان کیا کر رہے ہیں 'ٹائمز نیو رومن'؛ فونٹ سائز: 64px؛ لائن اونچائی: 80px؛ فونٹ وزن: جرات مندانہ؛ }. رابطہ قائم کرنے کے لئے یہ پریپروسیسر ہدایت کو استعمال کرنے کے لئے ضروری نہیں ہے - صرف منتخب عنصر کی خصوصیات میں نو تخلیق hagfish شامل کریں. مثال کے طور پر: H1 {.largeFont؛ }.

Stylus کے

ایک اور پریپروسیسر. اسی مصنف، دنیا جیڈ، ایکسپریس اور دیگر مفید کی مصنوعات کو دیا ہے کہ کی طرف سے 2011 میں پیدا کیا.

متغیرات دو طرح سے اعلان کیا جا سکتا ہے - واضح طور پر یا لپیٹ تو. مثال کے طور پر: فونٹ = 'ٹائمز نیو رومن'؛ - ایک ضمنی اختیار. لیکن $ فونٹ = 'ٹائمز نیو رومن' - واضح. Hagfish قرار دیا جاتا ہے اور لپیٹ منسلک. redColor () رنگ سرخ: نحوی طور پر مندرجہ ذیل ہے. H1 redColor ()؛: اب ہم مثال کے طور پر، شے کے شامل کر سکتے ہیں.

پہلی نظر پر stylus کے یہ سمجھ سے باہر لگ سکتا ہے. "آ" بریکٹ اور وقف ناقص کہاں ہے؟ لیکن یہ اس میں فیصلہ کرنے کے لئے ضروری ہے، تمام زیادہ واضح ہو جاتا ہے. یاد رکھیں، تاہم، اس پریپروسیسر کی طویل مدتی ترقی آپ کلاسک CSS نحو کا استعمال "دودھ چھڑانا" کر سکتے ہیں. ایک "خالص" سٹائل کے ساتھ کام کرنے کے لئے ہونے کے جب یہ کبھی کبھی مسائل کا سبب بنتا ہے.

کیا پریپروسیسر انتخاب کرتے ہیں؟

اصل میں، یہ ہے ... اس سے کوئی فرق نہیں پڑتا. تمام ورژن پر ایک ہی خصوصیات کے بارے میں پیش کرتے ہیں صرف ہر ایک کی نحو مختلف ہے. ہم مندرجہ ذیل کے طور پر آگے بڑھنے کے لیے سفارش کرتے ہیں:

• اگر آپ - پروگرامر اور سٹائل کے ساتھ دونوں کے کوڈ میں کام Sass کے استعمال کرنے کے لئے چاہتے ہیں؛
• اگر آپ - ایک coder اور روایتی ترتیب کے ساتھ کے طور پر سٹائل کے ساتھ کام کرنے کے لئے کم کرنے پر توجہ دینا چاہتے ہیں؛
• آپ کم از کم پسند ہے تو، stylus کے استعمال.

دلچسپ لائبریریوں بھی مزید ترقی کو آسان بنانے کے کر سکتے ہیں کے ایک لامتناہی تعداد میں سے سب دیکھنے کے لیے. بہت سے بلٹ میں خصوصیات کے ساتھ ایک طاقتور آلہ - صارفین Sass کے سفارش کمپاس پر توجہ دینے کی. مثلا، اگر آپ اسے انسٹال کرنے کے بعد آپ وینڈر ورژن سابقہ فکر کرنے کی ضرورت نہیں کرے گا. آسان بنا دیتا ہے grids کے ساتھ کام کرتے ہیں. پھول، sprites کے ساتھ کام کرنے کے لئے اوزار ہیں. ایک رینج کے پاس پہلے hagfish اعلان کیا. اس آلے کو دن کے ایک جوڑے کو دے دو - اس طرح آپ کو مستقبل میں وقت اور کوشش کا ایک بہت بچا لے گا.