ساختارمندتر کردن پروژه‌های CSS با استفاده از ویژگی Extend

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

یکی از این کارهای موثر، پیاده‌سازی مفاهیم Object Oriented CSS است که به طور خیلی ساده، OOCSS یعنی جدا کردن قسمت‌های مختلف: ساختار، طراحی و … و پرهیز از تکرار کد‌ها.
خیلی وقت‌ها پیش می‌آید که قسمت زیادی در کد‌ها و یا حتی پروژه‌های مختلف تکرار می‌شود. این موضوع اصلی این مطلب هست که روش‌های مختلفی برای حل این مسله داریم.

دو راه حل کلی برای حذف تکرار کدهای CSS وجود دارد:

  1. ایجاد تغییرات در نام‌های کلاس‌ها در فایل HTML
  2. تغیر در ساختار نوشتار CSS

یک مثال ساده مطرح میکنم: من برای نمایش لوگو سایت‌ها عکس را به عنوان بکگراند المان(در هدر مثلا h1 و در فوتر span) قرار می‌دهم و با این کار میتونم نام سایت را هم درون تگ HTML بنویسم. و سپس با استفاده از CSS آن نام را از نمایش کاربر مخفی نگه می‌دارم و تنها برای موتور‌های جستجو خوانایی دارد.
خب برای هر عکسی که بخواهم این کار را بکنم (لوگو هدر، لوگو فوتر و …) باید این کد‌ HTMLنوشته:

ادامه خواندن ساختارمندتر کردن پروژه‌های CSS با استفاده از ویژگی Extend

Sass چی داره که Less نداره؟

امیدوارم از مطلب قبل تا الان با Sass کار کرده باشید، چطور بود؟ به مشکلی بر نخوردید؟ اگر چیزی بوده توی کامنت‌ها بگید تا در موردش بحث کنیم.

Sass ابزار‌های قدرتمندی در اختیار میذاره که هیجان کار و سر و کله زدن با آن ها را بالا می‌بره:

 

Mixin Directives

Mixinها یکی از قدرت‌ترین ویژگی‌هایی است که از تکرار کد جلوگیری کرده و باعث تمیز شدن کد می‌شود. در واقع کد را یکبار نوشته و چندجا استفاده می‌کنید. مثال زیر را ببینید:

ادامه خواندن Sass چی داره که Less نداره؟

کدهای پایه SASS و شروع با Compass

در این مطلب قصد دارم کد‌های پایه را برای شروع کار بگم اما قبل از آن می‌خوام یکی از فریم‌ورک‌هایی که بر پایه SASS ساخته شده به نام Compass را نصب کنید. یکی از ویژگی‌های منحصربفرد sass فریم‌ورکای زیادی که براش وجود داره. و کامپس اولین فریم‌ورکی که توسط Chris Eppstein از نویسندگان هسته sass برایش نوشته شده.

Compass با تمرکز بر قدرت‌مندتر ساختن و راحت‌تر کردن SASS ساخته شده که Mixin و توابع مختلفی را در رابطه با CSS3 ،Typography ،Utilities ،Layout ،Reset ارایه کرده است.

ادامه خواندن کدهای پایه SASS و شروع با Compass