پیش پردازنده CSS: مروری، انتخاب، برنامه

مسلما همه طراحان وب با تجربه استفاده از پیش پردازنده. هیچ استثنا وجود دارد. اگر می خواهید به موفقیت در این فعالیت، در مورد این برنامه ها را فراموش نکنید. در نگاه اول، آنها ممکن است وحشت آرام تازه کار باعث - خیلی شبیه به برنامه نویسی است! در واقع، شما می توانید با تمام ویژگی های پیش پردازنده CSS برای حدود یک روز مطرح شود و اگر شما سعی می کنید، پس از آن چند ساعت. در آینده، آنها به طور قابل توجهی زندگی خود را ساده.

چگونه پیش پردازنده CSS

برای درک بهتر از ویژگی های این فن آوری، خلاصه به تاریخ ارائه بصری از صفحات وب حفر کردن.

هنگامی که تنها آغاز استفاده گسترده از اینترنت، بدون ورق های سبک وجود نداشت. اجرای اسناد به طور کامل در مرورگر بستگی دارد. هر کدام از آنها سبک خود را، که برای درمان از تگ خاصی استفاده شده است. بر این اساس، ظاهر صفحات وب مختلف بسته به سفارش که در آن مرورگر شما آنها را باز کنید. نتیجه - هرج و مرج، گیجی، مشکلات برای توسعه دهندگان.

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

با استفاده از جداول CSS همواره مشکل ساز بوده است. به عنوان مثال، طراحان وب اغلب مشکلات را با مرتب سازی و گروه بندی ویژگی های حال و وراثت است خیلی ساده نیست.

و پس از آن آمد 2000. نشانه گذاری به طور فزاینده ای شروع به شرکت در توسعه دهندگان جلویی حرفه ای، که مهم است که به سبک کار انعطاف پذیر و پویا است. وجود در قرار دادن زمان خواستار پیشوندهای CSS و ردیابی پشتیبانی از قابلیت های جدید از مرورگر. سپس با جاوا اسکریپت و کارشناسان روبی به کسب و کار کردم، ایجاد یک پیش پردازنده - روبنا برای CSS، ویژگی های جدیدی به آن اضافه شده است.

CSS برای مبتدی ها: ویژگی های پیش پردازنده

آنها چند تابع داشته

• متحد کردن پیشوند مرورگر و خاکی؛

• ساده نحو؛

• دادن فرصت برای کار با انتخابگرهای تو در تو و بدون خطا.

• بهبود یک ظاهر طراحی شده منطق.

به طور خلاصه: پیش پردازنده می افزاید: قابلیت منطق برنامه نویسی CSS. متغیرها، توابع، مارماهی دهان گرد، چرخه شرایط: در حال حاضر، یک ظاهر طراحی شده در فهرست معمول از سبک ها و با چند روش ساده و روش های انجام نشده است. علاوه بر این، توانایی استفاده از ریاضیات.

دیدن محبوبیت این افزودنی را قابل فهم است، W3C شروع کرده اند به تدریج اضافه کردن امکان از آنها را در کد CSS. به عنوان مثال، در مشخصات بنابراین تابع کالک () وجود دارد، است که توسط بسیاری از مرورگرها پشتیبانی. انتظار می رود که به زودی آن را امکان پذیر خواهد بود به مجموعه ای از متغیرها و ایجاد یک مارماهی دهان گرد. با این حال، این امر در آینده دور حال حاضر در اینجا اتفاق می افتد، و پیش پردازنده و در حال حاضر کار به خوبی.

پیش پردازنده محبوب CSS. گستاخانه سخن گفتن با

طراحی شده در سال 2007 است. نوشته اصلی یک جزء HAML - یک قالب HTML. ویژگی های جدید برای CSS عناصر کنترل توسعه دهندگان لذت در روبی در آهن، که شروع به گسترش آن در همه جا. بی احترامی صحبت کردن تعداد زیادی از ویژگی های است که در حال حاضر در هر پیش پردازنده شامل: متغیر، تعبیه انتخاب، مارماهی دهان گرد (پس از آن، با این حال، این استدلال نمیتواند اضافه شود).

متغیرهای اعلام بی احترامی صحبت کردن

متغیرها با علامت $ را اعلام کرد. آنها می توانند خواص و مجموعه خود را حفظ، برای مثال: "$ borderSolid: قرمز جامد اندازه 1px؛". در این مثال، ما یک متغیر به نام borderSolid اعلام و ذخیره آن مقدار قرمز اندازه 1px جامد. حال اگر در CSS ما نیاز به ایجاد یک عرض مرز قرمز اندازه 1px، به سادگی نشان می دهد که متغیر پس از نام املاک. پس از اعلام از متغیرهای نمی تواند تغییر کند. چند ساخته شده در توابع وجود دارد. به عنوان مثال، یک متغیر با مقدار $ redcolor # FF5050. در حال حاضر، کد CSS در خواص هر عنصر، استفاده از آن را به مجموعه رنگ فونت: P {رنگ: $ redColor؛ }. آیا شما می خواهید برای آزمایش با رنگ؟ استفاده از تابع تیره یا روشن کردن. این کار به طوری: P {رنگ: تیره ($ redColor، 20٪)؛ }. در نتیجه، redColor رنگ خواهد بود 20٪ سبک تر است.

بی احترامی صحبت کردن بسیاری از ساخته شده در توابع. به ارزش حداقل آنها را بخوانند، اما بهتر - به یاد بگیرند.

تودرتویی

پیش از این، برای نشان تودرتو مجبور به استفاده از یک طراحی طولانی و ناراحت کننده باشد. تصور کنید که ما باید یک div است که P، و در آن، به نوبه خود، مجموعه ای طول. برای DIV، ما نیاز به تنظیم رنگ فونت قرمز، برای ص - زرد، برای طول - صورتی. در CSS معمولی آن را به صورت زیر انجام می شود:

DIV {

رنگ: قرمز،

}

دیو ص {

رنگ: زرد؛

}

دیو ص طول {

رنگ: رنگ صورتی.

}

با پیش پردازنده CSS همه ساده تر و جمع و جور تر می شود:

DIV {

رنگ: قرمز،

ص {

رنگ: زرد؛

.span {

رنگ: رنگ صورتی.

}

}

}

عناصر به معنای واقعی کلمه "سرمایه گذاری" یکی دیگر.

دستورات پیش پردازنده

با استفاده از دستوراتimport می توانید فایل های وارد کنید. به عنوان مثال، ما باید فایل fonts.sass که سبک برای فونت اعلام کرد. آن را به style.sass فایل اصلی اتصال:import، فونت. انجام شد! به جای یک فایل بزرگ تنها با سبک های ما چند که می تواند برای دسترسی سریع و آسان به خواص مورد نیاز استفاده می شود.

مارماهی دهان گرد

یکی از ایده های جالب است. این اجازه می دهد یک خط به درخواست مجموعه ای از خواص. عمل شرح زیر است:

mixin largeFont {

فونت خانواده: "بار جدید روم '؛

اندازه فونت: 64px؛

خط ارتفاع: 80px؛

فونت وزن: ضخیم؛

}

مارماهی دهان گرد به درخواست به عنصر در صفحه، با استفاده ازinclude بخشنامه. به عنوان مثال، ما می خواهیم به آن اعمال می شود به هدر H1 است. ما ساختار زیر است: H1 {include: largeFont؛ }

تمام خواص مارماهی دهان گرد هستند یک عنصر H1 اختصاص داده است.

پیش پردازنده کمتر

نحو بی احترامی صحبت کردن یاد می آورد برنامه نویسی. اگر شما به دنبال گزینه ای است که بیشتر مناسب برای مبتدیان مطالعه CSS، برای کمتر است. این در سال 2009 ایجاد شد. از ویژگی های اصلی - پشتیبانی از CSS نحو مادری، به طوری که ناآشنا با Imposer و برنامه نویسی آن را آسان تر به یاد بگیرند.

متغیرها با استفاده از علامت @ را اعلام کرد. به عنوان مثال:fontSize: 14px؛ آثار تودرتو بر همان اصول به عنوان بی احترامی صحبت کردن. .largeFont () {فونت خانواده:: مارماهی دهان گرد به شرح زیر اعلام کرد: بار جدید روم '؛ اندازه فونت: 64px؛ خط ارتفاع: 80px؛ فونت وزن: ضخیم؛ }. برای اتصال لازم است به استفاده از دستورات پیش پردازنده - فقط اضافه کردن مارماهی دهان گرد به تازگی ایجاد شده در خواص این عنصر انتخاب شده است. به عنوان مثال: H1 {.largeFont؛ }.

قلم

پیش پردازنده است. ایجاد در سال 2011 توسط همین نویسنده، که جهان جید، اکسپرس و سایر محصولات مفید است.

متغیرها می توانند به دو روش اعلام کرد - به طور صریح یا ضمنی. به عنوان مثال: FONT = 'Times New Roman را'؛ - یک گزینه ضمنی. اما $ FONT = 'Times New Roman را - روشن است. مارماهی دهان گرد اعلام می شوند و به طور ضمنی در ارتباط است. نحو به شرح زیر است: redColor () قرمز رنگ. در حال حاضر ما می توانید آیتم برای مثال اضافه کردن،: redColor H1 ()؛

قلم بر روی نگاه اول ممکن است غیر قابل درک به نظر می رسد. براکت و سمی کالن "بومی" کجاست؟ اما لازم به شیرجه رفتن به آن، همه بسیار واضح تر می شود. به یاد داشته باشید، با این حال، توسعه بلند مدت از این پیش پردازنده می تواند "از شیر مادر گرفتن" شما با استفاده از نحو CSS کلاسیک. این گاهی اوقات باعث مشکلات زمانی که نیاز به کار با یک سبک "خالص".

چه پیش پردازنده انتخاب می کنید؟

در واقع، آن است که ... مهم نیست. تمام نسخه های مورد ویژگی های مشابه پیشنهاد می نحو هر یک متفاوت است. ما توصیه می کنیم به شرح زیر ادامه دهید:

• اگر شما - برنامه نویس و می خواهید برای کار با سبک های هر دو در کد، استفاده از بی احترامی صحبت کردن؛
• اگر شما - یک رمز گذار و می خواهید برای کار با سبک عنوان با طرح معمولی، توجه به کمتر.
• اگر دوست دارید مینیمالیسم، استفاده از قلم.

برای تمام مدل ها از تعداد بی شماری از کتابخانه جالب است که حتی بیشتر می توانید ساده تر توسعه. کاربران گستاخانه سخن گفتن توصیه می شود به توجه به قطب نما - یک ابزار قدرتمند با بسیاری از ویژگی های ساخته شده در. به عنوان مثال، پس از نصب شما هرگز مجبور خواهد بود در مورد پیشوند نسخه فروشنده نگران باشید. ساده با شبکه های کار. ابزار برای کار با گل، جن وجود دارد. طیف حال حاضر اعلام کرد مارماهی دهان گرد. به این ابزار چند روز - به این ترتیب شما یک مقدار زیادی از زمان و تلاش در آینده نجات دهد.