sass چیست؟ بهترین پیش پردازنده css

سلام دوستان امروز قرار است در این مقاله درمورد یک پیش پردازنده که در طراحی وب کاربرد دارد صحبت کنیم و این پیش پردازنده sass نام دارد. می خواهیم بدانیم sass چیست و چه کاربردهایی دارد و همینطور در کجا استفاده می شود در ادامه همراه ما باشید تا به جزئیات این ماجرا بپردازیم.

 

sass چیست؟

sass یک پیش پردازنده css است و به ما کمک می کند تا از ویژگی های منحصر به فردی در داخل css استفاده کنیم. این ویژگی ها مانند: قواعد تو در تو، متغیرها و ... می باشد و هدف استفاده کردن از sass این است که مراحل کدنویسی را ساده تر و موثرتر کنیم.
درواقع sass مثل یک اکستنشن برای css عمل می کند و به ما کمک می کند که همه چیز را سازماندهی شده نگهداری کنیم و فایل های Style sheet  را با سرعت بیشتری بارگذاری کنیم. این پیش پردازنده با تمامی نسخه های css سازگاری دارد.

 

 

Don’t Repeat Yourself (خودت را تکرار نکن)

در برنامه نویسی یک اصل به معنای عدم تکرار یک یا چند خط کد در قسمت های مختلف برنامه است.
برنامه نویس ها برای اینکه یک قطعه کد را دوباره استفاده کنند آن را در قالب کلاس یا تابع تعریف می کنند و موقع نیاز آن را فراخوانی می کنند و در صورت رعایت اصل عدم تکرار(DRY) تغییر در یک جز از برنامه، نیاز به تغییر در قسمت های دیگر کد ندارد. به همین دلیل رفع ایراد های برنامه و توسعه دادن آن بسیار راحت می باشد.

 

در html و css مشکلی که وجود دارد نداشتن امکان استفاده از  اصل (DRY) است که باعث تعریف پی در پی کدهای تکراری،سخت بودن تغییر و توسعه کدها می شود. با استفاده کردن از sass این مشکلات حل می شود و ساختاری قانونمند برای کدهای css ایجاد می کند.

 

 

تعریف متغییرها در sass چیست؟

از تعریف متغییر در sass می توان اطلاعات مورد نیاز برای استفاده مجدد را ذخیره کرد و مانند دیگر زبان های برنامه نویسی در زمان فراخوانی نوشتن نام متغییر کافی است. تعریف متغییر در پیش پردازنده sass مانند php با $ انجام می شود و کدهای آن در اخر کامپایل و به css تبدیل می شوند.

 

کدهای تودرتو با sass

در sassامکان تعریف selector های تودرتو و با قالبی شبیه به دیگر زبان های برنامه نویسی را فراهم می کند که کدها به راحتی نوشته شود. بعداز اینکه کامپایل کدها انجام شد، دستورات تودرتو به یک قالب شناخته شده در css تبدیل می شوند.

 

قطعه کدها در sass چیست؟

قطعه کدهای این پیش پردازنده در قالب فایل های جداگانه نوشته می شوند و قابلیت فراخوانی در دیگر فایل های sass را هم دارا هستند. به طور مثال: reset کردن در تمام فایل های css  نیاز است و با استفاده کردن از فایل های Partial می توانید کد reset را یکبار بنویسید و در دیگر فایل های sass آن را فراخوانی کنید. قطعه کدها در دیگر فایل های sass با import@  فراخوانی می شوند.

 

 

Import  در پیش پردازنده!

در css امکان Import فایل های دیگر وجود دارد و با استفاده از آن می توان کدهای css را به قسمت های کوچکتر تقسیم بندی و فراخوانی کرد، اما مشکل Import در css این است که با هر  import@ یک  Http Request ساخته می شود و sass  به جای ساخت یک  Http Requestفایل partial فراخوانی شده را با فایل اصلی ترکیب کرده و در آخر یک فایل css به مرورگر تحویل می دهد.

 

توسعه یا ارث بری در sass

 

یکی از پرکاربردترین ویژگی های sass وراثت است و با استفاده از آن می توان گروهی از ویژگی های یک  selector را در یک  selector دیگر به اشتراک گذاشت تا از نوشتن کدهای تکراری جلوگیری کرد, همان پیاده سازی اصل عدم تکرار

 

 

نتیجه گیری:

مواردی که گفته شد فقط برای آشنایی با دنیای sass می باشد و اگر بخواهید با این پیش پردازنده کار کنید می توانید از آموزش آن شروع کنید. اما قبل از یادگیری sass شما باید آموزش html css را شروع کنید. امیدوارم مطالب گفته شده برای شما قابل درک و مفید بوده باشد.