کدنویسی خوانا با Sass BEM و خروجی گرفتن همه کدها به یک برگه style.css

از ادامه مقاله قبل شروع میکنیم. میخواهیم با BEM کار کنیم تا کدنویسی خوانا داشته باشیم. نکات جدیدی که اینجا خواهیم دید یکی وجود آندرلاین در ابتدای نامگذاری فایل های scss است. یکی هم وجود watch برای اتوماتیک کردن کامپایل ها! همچنین برای تعریف متغیر ها در زبان روبی از علامت دلار استفاده میشود و در پایان علامت نقطه کاما ; قرار داده میشود.

دانلود کد های نهایی این مقاله

گام 1: پوشه بندی start finish

پوشه start همان پوشه ای است که کدهای ابتدای پروژه (با آنها پروژه را شروع به کدنویسی کردیم) در آن قرار دارد. سپس به این کدهای ابتدایی افزودیم تا کدهای داخل پوشه finish بوجود آید.

گام 2: کدنویسی خوانا با تعریف بلاک و مدیفایر در کدهای html

در داخل تگ body یک تگ nav با کلاس menu ایجاد کردیم که به آن بلاک Block گفته میشود. همچنین داخل این بلاک چهار کلاس مدیفایر Modifier ایجاد کردیم. (اشاره به دو حرف اول کلمه BEM) این کلاس های مدیفایر menu__item هستند. همانطور که میبینید ساختار نام مدیفایر ها در BEM برابر نام بلاک، به اضافه دوتا اندرلاین، به اضافه نام مدیفایر است.

گام 3: تعریف برگه های ساس

اینجا دو برگه ساس به نام _base.scss و _menu.scss ایجاد کردیم. برگه منو در پوشه modules قرار دارد. در برگه بیس تعریف متغیرهای رنگ و پدینگ و فونت سایز انجام شده است. این متغیر ها در سراسر پروژه استفاده میگردند. اینجا به عنوان نمونه در برگه _menu.scss از متغیر های تعریف شده در برگه _base.scss استفاده کردیم. ویدیو را تماشا کنید!

گام 4: کدنویسی خوانای استایل ها در برگه بلاگ منو

برای بلاک menu و مدیفایر آن menu__item کمی استایل تعریف کردیم و مطابق نیازمان آن را کم و زیاد کردیم. برای اطلاعات بیشتر حتما ویدیو را تماشا کنید!

دو سوال کلی درباره Scss BEM

سوال: چرا همه برگه های Scss به یک برگه css کامپایل میشوند؟

پاسخ: دیگر لازم نیست بروزر همه برگه های ما را بخواند. فقط یک برگه style.css را میخواند که در آن هزاران خط کد نوشته شده است. خوبی این یک برگه بودن افزایش سرعت بارگیری صفحه در بروزر برای خودمان و بازدیدکنندگان است. از طرفی گوگل هم به این موضوع برای سئو اهمیت میدهد.

سوال: اگر بروزر با یک برگه کامپایل شده نهایی style.css راحت است چرا در برگه های مختلف scss کدنویسی میکنیم؟

پاسخ: نام هر برگه برابر نام همان کلاس داخل ان است. به همین دلیل اگر زمانی خواستیم استایل های مربوط به یک کلاس را تغییر دهیم کافیست به برگه همنام همان کلاس رجوع کنیم.

گام بعدی: معرفی فریمورک ساس به نام کمپس

در مقاله بعدی درباره یک فریمورک ساس به نام کمپس صحبت میکنیم. این فریمورک کارمان را ساده تر میکند. همچنین از susy برای طراحی رسپانسیو استفاده میکنیم. اگر مشتاق هستید همین حالا ویدیو آن را تماشا کنید!