sass چیست و چه کاربردهایی دارد ؟
از زمانی که زبان های برنامه نویسی پا به عرصه دنیا گذاشتند زمان زیادی نمی گذرد . با پیدایش زبان های برنامه نویسی تحول عظیمی در تکنولوژی رخ داد . که یکی از آنها به وجود آمدن سایت ها است . یکی از زبان های ابتدایی که توسط آن سایت ها را راه اندازی میکنند زبان کد نویسی HTML می باشد با توجه به ابتدایی بودن این زبان برنامه نویسان زبان دیگری را ابداع کردند و آن زبان CSS :Casecade Style Sheets است زبان برنامه نویسی CSS اغلب مشکلات برنامه نویسی توسط زبان HTML را برطرف نمود .با استفاده از CSS برنامه نویسان و طراحان توانستند به روشی ساده تر چیدمان عناصر در صفحات وب را لحاظ کنند .با گذشت زمان تغییراتی روی CSS ایجاد شد و روش های جدیدی را برای برنامه نویسی آسان تر ابداع کردند در اینجا یکی از این روش ها را می خواهیم برای شما عزیزان شرح دهیم .
SASS چیست ؟
SASS یک زبان پیش پردازنده CSS می باشد یا به عبارتی دیگر : CSS Preprocessor Language می باشد . SASS مخفف Syntactically Awesome Style Sheets به معنای صفحات سبک بسیار متنوع است . میتوان گفت این زبان ، روشی توسعه یافته از کدنویسی در زبان CSS می باشد . به عبارتی دیگر روشی است که کدنویسی در زبان CSS را کوتاه و جذاب کرده است .
SASS یا CSS :
در ابتدای بوجود آمدن SASS برخی از افراد می پنداشتند که SASS جایگزینی است برای CSS این تصور اشتباه است زیرا این زبان بوجود آمد تا کدنویسی CSS را آسانتر کند زمانی که SASS اجرا میگردد به CSS تبدیل می شود .برخی از افراد بعد تمام شدن کدنویسی فایل های sass را مستقیم بروی سرور قرار می دهند . این کار اشتباه است زیرا مرور گر نمیتواند آنها را بخواند برای این کار باید فایل های sass به css تبدیل شود . برای تبدیل شدن فقط کافیست sass را روی ، Ruby نصب کرد .
کاربرد های 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 طراحی وب برای برنامه نویسان و طراحان جذاب تر می شود .