استفاده از پیش پردازنده های CSS با وردپرس – مقدمه

استفاده از پیش پردازنده های CSS با وردپرس – مقدمه

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

در طول چند سال گذشته، پیش پردازنده های سی اس اس (preprocessors CSS) زیادی را دیدیم که بر خاستن. به طور عمده، ابزارهای که شیوه نوشتن سی اس اس ها را آسانر کردند و آنها را بیشتر قابل نگهداری می کنند.

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

وقتی حرف از توسعه دادن رابط کاربری به میان می آید، فقط ساخت چیزی که خوب به نظر برسد کافی نیست، بلکه خوش ساخت بودن، و عملکرد ممکن نیز مهم است، و من معتقدم که این چیزی است که باید به پروژه های وردپرس ما کشیده شود.

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

 

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

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

 

LESS

less_logo

LESS یک زبان شیوه نامه پویا است. شما می توانید CSS های خود را در یک فایل less. به صورت برنامه نویسی نوشته و خروجی را به یک فایل css. کامپایل کنید. زبان تلفیقی برای LESS، جاوا اسکریپت است. این عالی است چون می توانید کامپایلر را در سمت سرور یا سمت سرویس گیرنده اجرا کنید.

 

برخی از ویژگی های LESS :

  • متغیرها – متغیرها می توانند تعریف شوند و در سراسر فایل فایل شما قابل استفاده باشند. به عنوان مثال، مقدار متغیری در جایی تغییر دهید، و خواهید دید که هر کجا از آن استفاده کرده باشید مقدارش آپدیت می شود.
  • Mixins هاmixins ها شامل یک دسته از خواص از یک مجموعه دستور در یک مجموعه دستور دیگر است. همچنین می توانید از mixins های پارامتری استفاده کنید که آرگومان قبول می کنند.
  • قوانین تو در تو – قوانین تو در تو این امکان را به شما می دهد که از قوانین تو در تو برای راحتی برای نوشتن کد خود استفاده کنید.
  • Namespacesفضاهای نام یا namespace ها اجازه می دهند که متغیرها یا mixins های خود را، برای اهداف سازمانی، یا فقط برخی چیزهای کوچک گروه بندی کنید.

من جزئیات بیشتر در رابطه با قواعد کد نویسی (syntax) را در قسمت بعدی از این مجموعه آموزش شرح خواهم داد.

دو تا از محبوب تر فریم ورک ها که از LESS استفاده می کنند:

 

SASS

sass_logo

SASS توسعه داده شده از CSS3 است. به دو صورت قابل تعریف است scss. و sass. که scss. متداولترین آنها است اما همچنین در indented syntax های قدیمی هم پشتیبانی می شود.

 

برخی از ویژگی های SASS :

  • متغیرها – متغیرها می توانند تعریف شوند و در سراسر فایل فایل شما قابل استفاده باشند. به عنوان مثال، مقدار متغیری در جایی تغییر دهید، و خواهید دید که هر کجا از آن استفاده کرده باشید مقدارش آپدیت می شود. همـــانند LESS.
  • Mixins – اجازه استفاده مجدد از دسته ای از CSS ها، خواص، یا selector ها را می دهد، همـــانند LESS.
  • تو در تو – برای اجتناب از تکرار selector ها در دیگری، همــانند LESS.
  • وراثت Selector ها – این می تواند به یک selector بگوید که تمام style های دیگری را بدون تکثیر دوباره به ارث ببرد. همــانند LESS.

در زیر تعدادی از فریم ورک ها را می بینید که از SASS و SCSS استفاده شده است:

 

بحث و نتیجه گیری

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

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