جستجو کردن
بستن این جعبه جستجو.
جستجو کردن
بستن این جعبه جستجو.

چیست Sass و چه کاربرد هایی دارد؟

راهنمای نوشتار

همانطور که می دانیم در زبان های HTML, CSS کدها از قبل تعریف شده اند و بدین معنا می باشد که نمی شود در آن کدی وارد کرد و باید فقط از کدهای تعریف شده استفاده کنیم . به همین دلیل است که sass به وجود آمد تا بتوانند از طریق آن دستوراتی که خارج از css است را وارد آن کنند . در sass می توان متغییر ایجاد کرد با این کار شما می توانید اطلاعات خود را در متغییر ها قرار دهید و در هنگام لزوم از آنها در css استفاده کنید . همچنین شما می توانید با استفاده از sass چیدمانی ساده تر داشته باشید زیرا در css نمیتوان از ساختار درختی استفاده کرد .نکته ی بعدی این است که شما می توانید در sass استایل های ماژولار ایجاد کنید .
در برخی از مرورگرها برای اجرای درست یک کد استایل دهی باید کد را همراه با یک پیشوند وارد کنیم در css این کار کمی دشوار است زیرا باید برای چند مرورگر مختلف چند نوع تایپ کنیم با استفاده از sass این کار اسان تر شده است.
بطور کلی می توان گفت با استفاده از پلتفرم sass طراحی وب برای طراحان آسانتر و جذاب تر شده است و همچنین یک پلتفرم ایده آل برای ایجاد استایل دهی می باشد .sass ویژگی های دیگری همچون ارث بری و استفاده از توابع را دارا است . در ادامه به بررسی بیشتر این نکات می پردازیم .

ایجاد متغییر :

بارها شده است در برنامه نویسی css خواستیم که یک مقدار ثابت را در چند جای برنامه درج کنیم و در هر بار استفاده از آن مجبور بوده ایم که کدهای بسیاری را درج کنیم زیرا در این زبان متغییری وجود ندارد . اما با روی کار آمدن sass این مشکل حل شد بدین صورت که در برنامه متغییری تعریف کرده و اطلاعاتی که قرار است چندین بار استفاده کنیم را در آن قرار می دهیم برای هر بار استفاده فقط کافی است آن متغییر را فراخوانی کنیم .برای این کار کافی است که متغییری با کاراکتر $ بسازیم.

دستور import :

دستور import هم در sass و هم در css موجود می باشد اما مفهوم آنها با هم متفاوت می باشد import در css به شما این امکان را می دهد تا فایل های خود را به قسمت های کوچک تر تقسیم کنید اما مسئله اینجا ست که وقتی شما از این دستور استفاده کنید HTTP های مختلف ساخته می شود و کار را برای مرورگر سخت می کند در نتیجه بارگذاری صفحات با تاخیر انجام می گیرد . اما در saas قضیه متفاوت است وقتی شما از این دستور استفاده می کنید HTTP جدید ساخته نمی شود بلکه شما محتوایی را که درخواست کرده اید و فایل مورد نظر ترکیب می شود و بعد از تبدیل شدن به کد css ، فقط یک فایل css بارگذاری میگردد که سرعت بارگذاری کاهش می یابد .

استفاده از توابع :

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

mixin :

در cssمکرر پیش آمده که کد های طولانی را در چند جا درج کنیم کدهایی که پیشوند های زیادی دارد این کار باعث می شود که از سرعت برنامه نویسی ما کاسته شود . اما در sass اوضاع کمی متفاوت تر است ما در اینجا از mixin استفاده می کنیم اما mixin چیست ؟mixin یک سری کد css می باشد که قرار است در طول برنامه در چندین جا استفاده شوند برای استفاده از آن لازم نیست که هر بار کدهای بسیاری را تایپ کنیم فقط کافیست که آن mixin را فراخوانی کنیم . وقتی از mixin استفاده شود سرعت برنامه نویسی طراحان افزایش می یابد و کدنویسی برای آنها جذاب تر می شود .

وراثت :

شاید به جرات بتوان گفت این ویژگی مهترین قابلیت sass می باشد . ویژگی که اکثر زبان های های برنامه نویسی آن را دارا هستند البته بجز css و چند زبان دیگر که آن هم با بوجود آمدن sass حل شده شده است . گاهی پیش آمده که شما در برنامه خود از استایل های مشابه استفاده کرده اید و آنها ویژگی های یکسانی دارند با استفاده از وراثت لازم نیست که دیگر برای هر کدام از آنها ویژگی های مشابه را ذکر کنید می توانید از محتوایات یک کلاس در کلاس دیگر ازث ببرید .

همانطور که مشاهده کردید با استفاده از پلتفرم sass طراحی وب برای برنامه نویسان و طراحان جذاب تر می شود .

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *