من یک قالب Sass ساختم. شما فقط می توانید از من کپی کنید!

Summarize this content to 400 words in Persian Lang
آخرین قالب Sass که من ساختم بیش از 2 سال پیش بود. تصمیم گرفتم آن را با اینترنت به اشتراک بگذارم و در نهایت 35 هزار بازدید داشت.

از آن زمان خیلی چیزها تغییر کرده است. بنابراین، تصمیم گرفتم آن را دوباره کار کنم و با افراد بیشتری به اشتراک بگذارم.

این در حال حاضر آخرین ساختار پوشه Sass من است که تقریباً برای هر پروژه استفاده می کنم، به جز تغییرات جزئی در فایل ها.

نحوه دانلود و استفاده از آن

برای استفاده از این قالب در پروژه خود، می توانید بر روی آن کلیک کنید Use this template در GitHub. یا فقط می توانید دانلود کنید sass پوشه و آن را در پروژه فعلی خود قرار دهید و شروع به استفاده از آن کنید.

معماری

خوب، بیایید به پوشه ها برگردیم. 6 پوشه و 1 پوشه اصلی وجود دارد style.scss فایل

abstracts پوشه

شروع با پوشه 1: abstracts. این پوشه فقط برای موارد مربوط به Sass استفاده می شود. و هیچ چیز از این پوشه در CSS کامپایل نمی شود.

این مکانی است که در آن همه متغیرها، میکس‌ها، توابع، مکان‌ها، نقشه‌ها و غیره را می‌نویسید.

base پوشه

بعدی، base پوشه این پوشه شامل سبک های پایه یا عمومی برای پروژه شما است.

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

ضمنا من هیچ فایلی را در هر دو تغییر نمی دهم abstracts و base پوشه از آنجایی که معماری معمولا در اکثر پروژه های من یکسان است.

components پوشه

components پوشه همانطور که از نام آن پیداست، این پوشه تمام استایل ها را برای اجزای خاص مورد استفاده در پروژه نگهداری می کند. این می تواند شامل دکمه ها، کارت ها، کشویی، فیلدهای ورودی و غیره باشد.

اگر اجزای قابل استفاده مجدد زیادی در وب سایت خود داشته باشید، معمولاً این پوشه بزرگ می شود.

layouts پوشه

و بر خلاف components پوشه، layouts پوشه شامل 1 سطح بالاتر سبک است که استفاده می شود ساختار وب سایت شما را تعریف می کند. این می تواند مواردی از این قبیل باشد header، footer یا sidebar از وب سایت شما

pages پوشه

در حال حرکت، pages پوشه حاوی سبک های خاص صفحه است که در سطح جهانی اعمال نمی شوند.

مثلا نمی توانیم قرار دهیم header در pages پوشه، از آنجایی که در هر صفحه استفاده می شود، اما ما می توانیم سبک های بخش “Teams” را در خود قرار دهیم. _about.scss فایل همچنین می توانیم سبک های مرتبط با مقاله را در ما قرار دهیم _blog.scss فایل زیرا آنها فقط در آن صفحات استفاده می شوند یا حداقل معنی دارند.

utilities پوشه

شبیه به components پوشه، utilities پوشه دارای سبک های خاصی برای پروژه ما است. اما، چه تفاوتی دارد؟

بیایید یک مثال متنی در نظر بگیریم. فرض کنید، یک نام کلاس وجود دارد، به نام .text-highlight. هنگامی که در یک پروژه استفاده می شود، تنها هدف آن برجسته کردن متن است و عدم تداخل با سایر سبک های متن. اما، ممکن است بگویید، همینطور است components پوشه در components پوشه، استایل ها اغلب کپسوله شده یا یک واحد مجزا هستند، مانند یک دکمه، کارت ها یا فیلدهای ورودی. اما، در utilities پوشه، یک واحد جداگانه نیست، عنصر موجود را تغییر می دهد. همانطور که دیدیم با .text-highlight، به خودی خود یک چیز جداگانه نیست، مانند button، بلکه متن موجود را به سبک دیگری تغییر دهید.

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

همچنین یک فایل به نام داریم _shame.scss. این مفهومی است که من از “رهنمودهای Sass” یاد گرفتم. اساساً، اگر احساس می کنید سبکی که نوشتید به هیچ فایل یا پوشه ای تعلق ندارد، باید آنها را در آن قرار دهید _shame.scss. ما این فایل را در انتهای شیوه نامه خود قرار می دهیم که می توانیم از آن برای اهداف اشکال زدایی نیز استفاده کنیم.

همچنین، این تنها فایلی است که می توانید آزادانه از آن استفاده کنید !important یا یک id انتخابگر، و با آنها وحشی شوید. اما، پس از یافتن راه حل مناسب برای مشکل خود، مطمئن شوید که آنها را مرتب کرده و فیلتر کنید.

_index.scss فایل

شاید قبلاً متوجه شده باشید که هر پوشه دارای یک فایل به نام است _index.scss. این به دلیل @use و @forward.

در Sass قدیمی، ما فایل ها را با آن وارد می کردیم @import، اما، اکنون ما یک راه حل مدرن داریم: @use که برای جایگزینی قدیمی ایجاد شده است @import.

همچنین دارای برخی ویژگی های جالب دیگر است که می توانید در اینجا بخوانید.

اگر نگاه کنیم به _index.scss فایل ها، ما می توانیم ببینیم که فقط وجود دارد @forwards که برای صادرات فایل های داخل پوشه استفاده می کنیم. با انجام این کار، به جای اینکه هر فایل را به صورت جداگانه وارد کنم، می توانم کل پوشه را یکجا وارد کنم.

و در اصل ما style.scss، فایل ها را با آن وارد می کنیم @use روش

اگر می خواهید از متغیر یا mixin خود استفاده کنید abstracts پوشه در شما _button.scss فایل، می توانید آن را با نوشتن وارد کنید

@use “../abstracts” as *;

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

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

واقعیت جالب: من هم استفاده کرده ام @use و @forward در اولین قالب sass من 2 سال پیش.

style.scss فایل

آخرین، اما نه کم اهمیت ترین، اصلی ما style.scss فایل، که در آن همه چیز در یک مکان ادغام می شود. و ترتیب ادغام آنها نیز مهم است زیرا مشخص می کند که کدام سبک باید دیگری را نادیده بگیرد.

من این نمودار را برای نشان دادن نحوه سفارش فایل ها ایجاد کردم. با خیال راحت آن را در GitHub بررسی کنید.

دیگر

و همین. این ساختار پوشه به شدت از الگوی 7-1 در Sass Guidelines و همچنین ویدیوی Kevin Powell در Sass الهام گرفته شده است. پس براشون فریاد بزن

این شروع مجموعه “من چیزی ساختم” بود که در آن پروژه های جالب و جالب خود را به اشتراک می گذارم و روند فکری خود را در پشت آن توضیح می دهم.

مثل همیشه، ممنون که خواندید. و در قسمت بعدی شما را خواهم دید. 🙂

@use "../abstracts" as *;