وبلاگ با برنامه
» پوشه بندی پروژه با استاندارد های مختلف
پوشه بندی پروژه با استاندارد های مختلف
برای دیدن اینکه پوشه های یک پروژه که با sass نوشته شده دقیقا به چه صورت نامگذاری میشوند و ترتیب قرار گرفتن آنها چگونه است میتوانید به این ریپوسیتوری در گیتهاب بروید. در این مقاله نیز قصد داریم در رابطه با همین ریپوسیتوری توضیح بدهیم که یک starter sass project محسوب میشود.
فایل های پوشه utilities
رنگ ها, فونت ها, متغیر ها (کانفیگ) , فانکشن ها , میکسین ها و تایپوگرافی فایل هایی هستند که در این پوشه قرار گرفتند. میتوانید با مراجعه به لینکی که در مقدمه به آن اشاره شد مشاهده فرمایید! یک فایل به نام index هم در کنار فایل های دیگر وجود دارد. تمام برگه ها در آن import میشوند تا برای import کردن تک تک فایل ها بتوانیم راحت تر عمل کنیم. برای فونت ها میتوانید از google fonts استفاده نمایید بجای اینکه خودتان فونت خریداری کنید و در هاست آپلود نمایید.
بررسی فایل styles.scss در خارج پوشه ها
این فایل کدهای خاصی ندارد. تنها فایل های index ای که در پوشه ها وجود دارند به این فایل import میشود. خوبی این کار این است که وقتی میخواهیم تمام فایل های scss را کامپایل کنیم کامپایلر ما راحت همه را کامپایل میکند و تنها یک فایل به نام styles.css میسازد. البته در کنار آن یک map نیز ساخته میشود که معماری قرار گرفتن فایل های ساس را نشان میدهد.
مطلب مرتبط
آموزش Communication در هوانوردی
OOCSS چیست؟
OOCSS یک الگو (پارادایم) برنامه نویسی است. OOCSS مخفف Object Oriented CSS است، درواقع همان مفهوم برنامه نویسی Object Oriented دارد. در OOCSS تمرکز برروی کامپوننت های منعطف، ماژولار، و قابل تعویض است که تنها یک کار را انجام میدهند. درواقع در OOCSS کامپوننت ها تنها یک وظیفه دارند و از یکدیگر مستقل هستند.
SMACSS چیست؟
SMACSS (تلفظ smaks) مخفف Scalable and Modular Architecture است. SMACSS روش یا methodology نوشتن CSS است. در این شیوه سطوحی معرفی شده اند که CSS باید در آن سطوح نوشته شوند.
بر اساس SMACSS پنج سطح base، layout، module، state، و theme وجود دارند.
قوانین base همان قوانین پیش فرض هست که بر روی المان های html اعمال میشود. مثلا حذف margin از المان body.
قوانین rule صفحه را به بخش های مختلف تقسیم میکند. layoutها میتوانند یک یا چند ماژول را درون خود داشته باشند.
moduleها بخش هایی هستند که در پروژه تکرار میشوند. مانند لیست محصولات، calloutها و .. .
قوانین state توضیح میدهد که ماژول ها یا Layoutها در وضعیت های مختلف چگونه نمایش داده شوند. آیا باید مخفی شوند و یا expand بشوند؟ فعال هستند یا غیر فعال؟
قوانین theme چیزی شبیه به قوانین state هستند. themeها هم توضیح میدهند که layout و moduleها چگونه نمایش داده شوند. البته سایت میتواند theme نداشته باشد.
از اینکه این مقاله را خواندید سپاسگذارم!
