undefined
021 33328750 © THE ART OF PROGRAMMING -
بخش هفتم: پیش پردازنده و فریم ورک های CSS

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

پیش پردازنده های  CSS

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

غالب پیش پردازنده های CSS عبارتند از Sass، Less، و Stylus، و برخی از ویژگی های مشترک آنها عبارتند از:

  • جمع، تفریق، ضرب، و تقسیم. نوشتن مسائل ریاضی باعث می شود که کد در آینده بقا و سندیت بیشتری داشته باشد و به جلوگیری از بروز " اعداد جادویی" مشکل ساز (یک عدد جادویی یک مقدار با معناست که در یک برنامه ظاهر می شود )، که بدون توضیح پیش می آیند، کمک می کند.
  • متغیرها : یک مثال می تواند تنظیم یک متغیر رنگی در یک مکان و سپس ارجاع چندین باره به آن درصفحه کد باشد.
  • توابع :  برای مثال، تابع ساخته شده درصد که هر عدد را به یک درصد در CSS تبدیل می کند.
  •  شروط If/else : موارد شرطی در CSS برای به کار بردن در یک صفحه و یا حتی تعویض بین یک تم روشن با تاریک مفید است.
  • حلقه ها : حلقه برای جلوگیری از تکرار کد هنگام نوشتن چیزهایی مانند شبکه ها یا ایجاد کلاس های خاص برای یک دسته از رنگ های مختلف کمک می کنند.

 این ویژگی ها در تقریباً هر زبان برنامه نویسی وجود دارد، بنابراین جای تعجب نیست که برنامه نویسان بخواهند در CSS نیز باشند.

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

پیش پردازنده های CSS به طور فوق العاده مفید هستند، اما آنها فقط CSS را آسان تر می سازند و شامل سبک های جدید نیستند. به همین دلیل است که فریم ورک CSS وجود دارد.

فریم ورک  CSS

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

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

اجازه دهید نگاهی دقیق تر به برخی از آنچه Bootstrap ارائه می دهد، مانند جداول، داشته باشیم. جداول می تواند یکی از خسته کننده ترین کدها در CSS باشد. جداول پیش فرض مرورگر به نظر بسیار بدقیافه هستند و CSS  به دشواری می تواند آنها را زیبا کند. خوشبختانه،Bootstrap  کدهای خود را برای جداول که به نظر می رسد خوب و مناسب بوده و برای کار کردن، سریع و آسان است، ارائه کرده است

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

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

نتیجه

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