css preprocessor یا پیش پردازنده سی اس اس چیست ؟

[hooman_the1]

پیش پردازنده (preprocessor) های CSS – ابزاری موثر برای طراحی سریع تر صفحات وب و رابط های کاربری
پیش پردازنده (preprocessor) های CSS با هدف صرفه جویی در وقت و میزان کار یک توسعه دهنده وب، قابلیت هایی را به فایل های CSS می افزایند. اگر تجربه کدنویسی با هر زبان پیش پردازش CSS ای را داشته باشید، می توانید آن را به نوع داده دیگری تبدیل کنید.

پیش پردازنده (preprocessor) ها می توانند با asset هایی مانند متغیرها، اپراتورها، interpolation ها، توابع و mixins، عملکرد CSS ها را ارتقاء دهند. همه asset های فوق برای افزایش کارایی و بهره وری با سینتکس معمولی CSS ادغام شده اند.

نیاز به پیش پردازنده (preprocessor) های CSS
هنگامی که تکامل وب را در طول چندین سال مورد مطالعه قرار می دهید، به راحتی می توانید مشاهده نمائید که استفاده از css با وضعیت فعلی کافی نیست. CSS تقریبا یک مفهوم ابتدایی است. و هنگامی که به پروژه های پیچیده برخورد می کنید، استفاده از CSS حتی سخت تر هم می شود. از سوی دیگر، مشخصه های جدید نیز بطور مداوم به HTML افزوده می شوند.

شما می توانید از طریق تفکیک تعاریف به فایل های کوچک تر و انتقال آن ها به یک فایل بزرگ، CSS بهتری بنویسید. در حالی که این کار سبب می شود component ها با موفقیت ارائه شوند، می تواند منجر به ایجاد مشکلاتی مانند تکرار کد و مدیریت (maintenance) دشوار آن نیز بشود.

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

ادامه دارد ...

منبع : appzweb.ir

 

[hooman_the1]

چرا به سراغ پیش پردازنده (preprocessor) های CSS برویم
از آنجا که پیش پردازنده preprocessor CSS، نسخه پیشرفته ای از تکنولوژی CSS است، می تواند یک CSS پایه ای کاملا مناسب را ایجاد نماید. بیایید با هم مزایای کلیدی استفاده از این تکنولوژی را بررسی نمائیم.

1. پیش پردازنده ها ، (DRY (Don’t Repeat Yourself بوده و(WET (Write Everything Twice نیست
یکی از ویژگی های برجسته پیش پردازنده preprocessor CSS این است که هنگام نوشتن کد از اصل DRY(کد خود را تکرار نکنید) پیروی می کند و نه از اصل WET (هر چیزی را دو بار بنویسید). این امر موجب صرفه جویی در زمان توسعه دهنده می شود زیرا دیگر مجبور نیست بارها و بارها نگران نوشتن کد باشد.

2. کمک به ماژولار نویسی و پرتابل نویسی
عناصر ساختاری سایت های خاص به همان صورت پیشین باقی می مانند و پیش پردازش، به ویژه در استایل LESS (بعدا مورد بحث قرار می گیرد)، ایجاد ماژول های قابل استفاده مجدد را آسان می کند. توسعه دهندگان هم اکنون می توانند از متغیرها برای تغییر رنگ ها، جنبه های بصری و فونت ها با افزایش سرعت و عدم نیاز به جستجو و جایگزینی استفاده کنند.

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

و شما باید تمام این پروسه ها را زمانی که نیاز دارید مواردی مشابه را در جای دیگر قرار دهید، مجددا تکرار نمائید. پیش پردازنده (preprocessor) ها می توانند از طریق کمک به جلوگیری از تکرار کدنویسی و افزونگی، به میزان قابل توجهی در زمان و میزان فعالیت صرفه جویی کنند.

4. قدرت استفاده مجدد از کد
از آنجا که CSS عمدتا از تایپ کردن مکرر کدهای یکسان نوشته شده است، توسعه دهندگان به خوبی از یکنواختی پنهان شده در ورای CSS آگاهی دارند. برای مثال، اگر به منوی خاصی برای داشتن ویژگی drop shadow (سایه از پایین) احتیاج باشد، باید هر بار، کد را مجددا تایپ کرده یا آن را copy-paste کنید.

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

5. CSS شما بیشتر سازماندهی می شود
با استفاده از پیش پردازنده (preprocessor) ها، CSS بیشتر سازماندهی می شود، مخصوصا زمانی که بصورت LESS و Sass (دو نمونه از پیش پردازنده (preprocessor) های CSS محبوب) درآمده باشد. هر دوی این استایل ها از تعاریف تو در تو پشتیبانی می کنند.

6. نگارش آسان
اگر با CSS آشنا بوده و تجربه نوشتن فایل های Less و Sass.scss را داشته باشید، پیش پردازنده (preprocessor) ها نگارش به مرتب ساده تری خواهند داشت.

اگر قصد دارید پروژه جدیدی شروع کنید، می توانید از قابلیت های مذکور استفاده نموده و بلافاصله بی نیاز از نوشتن مجدد هر چیزی شوید. شما می توانید از style sheet های سبک تر بهره ببرید که می توانند نگارش، مدیریت و نگهداری (maintenance) و آپدیت آسان تری داشته و حتی توسط چند نفر هم پشتیبانی شوند.

7. تنظیمات و مدیریت و نگهداری (maintenance) آسان
کد می تواند به راحتی مدیریت و نگهداری (maintenance) و استفاده مجدد شود. هنگامی که موردی در پیش پردازنده (preprocessor) تغییر داده شود، خود به خود در تمام صفحات CSS هم اعمال می گردد.

شما می توانید از متغیرها، mixins و توابع استفاده نموده و مقدار یا حتی گروهی از مقادیر را تعریف کنید، سپس با چند ترفند کوچک از همین مقادیر در اینجا و هر جای دیگری استفاده کنید. پیش پردازنده (preprocessor) ها در مدیریت و نگهداری (maintenace) استایل شیت های بزرگ به شما کمک می کنند، بنابراین می توانید آن ها را هر زمانی که لازم باشد، اجرا کنید.

ادامه دارد ...

منبع : appzweb.ir

 

[hooman_the1]

پیش پردازنده (preprocessor) های CSS محبوب – Sass، Less و Stylus

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

توسعه دهندگان می توانند برای پیمایش کدهای خود و تبدیل ان ها به stylesheet هایی منظم، از میان این پیش پردازنده (preprocessor) ها انتخاب کنند. این پیش پردازنده (preprocessor) ها عبارتند از: Sass، Less، Stylus، SwitchCSS، Turbine، CSS-Crush، Compassو ... .

سه تا از محبوب ترین پیش پردازنده (preprocessor) های CSS عبارتند از Sass، Less و Stylus.

در مقاله بعدی به معرفی این 3 و مزایای هرکدام خواهیم پرداخت .... با ما همراه باشید.

پایان

منبع : appzweb.ir