Sass, Less
یکی از مشکلات css نویس‌ها همیشه این بوده که چیزی به اسم متغیر یا با یک نگاه بازتر چیزی به اسم code reusability و راهی برای پیروی از اصل DRY ندارن. lees و sass برای حل این مشکل طراحی شده‌اند. می‌پرسید مثلا چه کمکی میکنند؟ مثلا شما توی سایتتون از سه رنگ اصلی بنفش، خاکستری و نارنجی استفاده میکنید. خیلی مواقع هم طبیعتاً می‌خواهید این سه رنگ کمی روشن‌تر یا کمی تیره‌تر بشوند. نهایتاً از چیزی حدود 20 رنگ استفاده کردید.
حالا فرض کنید کارفرما بگوید این سه رنگ را به ترتیب به رنگ های خاکستری، سیاه و بنفش تغییر بدهید. این کار به صورت دستی یعنی هزاران خط کد رو بخونید و توی هر مورد از 20 رنگ، رنگ جدیدی قرار بدید و اگر خیال کرده‌اید با search و replace ممکن است در اشتباهید چون رنگ‌های خاکستری و بنفش تکراری هستن و جایشان عوض شده و این یعنی وقتی یکی از رنگ‌های اولی را تغییر بدهید دو ست رنگ مشابه دارید که معلوم نیست کدام جدید است و کدام قدیمی. Sass و Lass به شما اجازه میدهند سه تا متغیر تعریف کنید و در تمام سایت فقط به آن متغیرها اشاره کنید. کارفرما هم که گفت رنگ‌ها را عوض کنید فقط سه خط کد رو عوض میکنید و تمام. حتی روشن و تاریک کردن رنگ‌ها هم متغیرهای جدید نمیخواهد، طبق همان سه متغیر و با کمک توابع داخلی Sass و Less می‌توانید تغییرات زیادی روی رنگ‌ها انجام بدهید. تازه این فقط بخش بسیار کوچکی از قدرت Sass و Less هست.
اما چطوری کار میکنند؟ فایل Sass و Lass را جای css می‌گذارید؟ نه. شما اول به این زبان‌ها استایل‌هایتان می‌نویسید و وقتی کارتان تموم شد با یک مبدل آن‌ها را به Css های نهایی تبدیل میکنید. اگر نیاز به تغییر داشتید، Sass و Less را تغییر می‌دهید و دوباره کامپایل میکنید. به همین خاطر به این‌ها preprocessor می‌گویند.
Css
مخفف عبارتCascading Style Sheet است و می‌توان گفت ترجمه فارسی آن”صفحات استایل آبشاری” می‌باشد. دلیل استفاده از واژه‌ی آبشاری این است که دستوراتی که به زبان Css به عناصر صفحات وب اعمال میکنید به فرزندان آن مجموعه نیز می‌‌رسد.
کدهای Css مجموعه دستوراتی هستند که با استفاده از آن‌ها می‌توانید ویژگی‌های ظاهری صفحات وب را مشخص کنید. اگر کدهای HTML را مانند اسکلت بندی صفحه وب در نظر بگیرید، باید گفت که کدهای Css بخش‌های دیگر ساختمان شما را می‌سازد و اجازه میدهند صفحات وب‌سایت شما در کنار ساختار قوی، ظاهر مناسبی داشته باشند.
نکات مهم درباره Css
❗️به یاد داشته باشید که اگر از این کدها به درستی استفاده نکنید، تأثیرات منفی روی وضعیت وب‌سایت شما خواهد گذاشت.
❗️حتماً در مورد اولویت‌بندی انتخاب‌گر تحقیق کنید تا روند بارگزاری صفحه مورد نظر شما به درستی و در کمترین زمان طی شود.
✍دلیل استفاده از Sass,Less به جای Css
✅قابلیت ایجاد متغیر(variables) در Sass به شما اجازه می‌دهد برای یک متغیر مقداری را ذخیره کرده و در موقعیت‌های گوناگون از آن استفاده کنید.
✅نوشتن عناصر به شکل تو‌درتو (nesting) که منجر به سامان‌دهی کدهای Css می‌شود. بهترین حالت برای حفظ سادگی کد استفاده از چهار سطح تودرتویی است.
✅جلوگیری از تکرار قطعه کدها با ایجاد توابع (mixins) باعث می‌شود توابعی از Css را که نیاز است چندین بار در وب‌سایت خود استفاده کنید را گروه‌بندی کنید.
✅وراثت یا گسترش پذیری در Sass ویژگی‌ای است که به شما اجازه می‌دهد مجموعه‌ای از مشخصات را از یک عنصر به عنصر دیگر منتقل کنید. با این ویژگی زمان کمتری را صرف نوشتن کدهای تکراری خواهید کرد.
دیدگاهتان را بنویسید