دوره آموزش پیش پردازنده Sass

اگر طراح و برنامه نویس سایت هستی و با زبان CSS کار می کنی، باید SASS رو یاد بگیری، SASS محبوب‌ترین پیش پردازنده CSS، بین برنامه نویسان است. اگر میخوای بدونی SASS چیه و چرا باید حتما آن را یاد بگیرید بقیه توضیحات را مطالعه کنید.

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

یعنی چی این قضیه؟ قاعده ای در برنامه نویسی وجود دارد به معنای عدم تکرار یک یا چند خط کد در قسمت‌های مختلف برنامه است. این قاعده را، خودت را تکرار نکن (Don’t Repeat Yourself) نام دارد.

برنامه‌نویس‌ها برای ایجاد امکان استفاده مجدد از یک تکه کد، آن را در قالب تابع یا کلاس تعریف می‌کنند و در صورت نیاز تابع مورد نظر فراخوانی و یا شی جدیدی از کلاس تعریف می‌شود. در صورت رعایت اصل DRY تغییر در یک جز از برنامه، نیازی به تغییر در قسمت‌های دیگر کد ندارد؛ در نتیجه رفع ایرادهای برنامه و توسعه دادن آن بسیار ساده‌تر خواهد بود. ولی در CSS این امکان وجود ندارد و به همین دلیل برای جلوگیری از تکرار کد، جبران محدودیت‌ها و ضعف‌های زبان CSS، مدیریت و نگهداری راحت استایل های صفحات وب از SASS استفاده می کنند.

با یک مثال موضوع رو بیشتر متوجه خواهیم شد:

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

مثلا دوست دارد تمام رنگ های قهوه ای به رنگ صورتی تغییر شکل بدهند. در CSS مجبوریم در کل اون چند هزار خط کد بگردیم و هرجایی رنگ قهوه ای دیدیم به رنگ صورتی تغییر بدهیم. مشخصه که کار بسیار زمان‌بر و البته کسل کننده است. ولی با استفاده از پیش پردازنده SASS چون امکان تعریف متغیر را داریم می توانیم یک متغیر جهت رنگ تعریف کرده و هرجایی نیاز بود از آن استفاده می کنیم. حال برای تغیر رنگ کافیست مقدار متغیر را عوض کنیم تا در کل برنامه تغیر پیدا کند.

SASS خود را با شعار ما دوباره CSS را جذاب کرده ایم، تبلیغ می کند. در واقع SASS: استفاده از اصول برنامه نویسی برای نوشتن کد های استایل دهی یا CSS است. با استفاده از اصول برنامه نویسی دیگر نیازی نیست، که یک کد را بارها و بارها در CSS تکرار کنیم، تنها کافیست که آن را درون یک تابع قرار دهیم.

SASS طراحی شده است تا امکانات جدیدی مانند متغیرها، چیدمان تگ‌ها، ترکیب کدها، ارث بری (Inheritance) و دیگر ویژگی‌های یک زبان برنامه نویسی را به Css اضافه کند.

SASS مخفف Syntactically Awesome Style Sheets به معنای "صفحات از نظر نوشتاری عالی" می باشد. SASS یک زبان کامپایلری که کارش تولید کدهای CSS است. کدهای SASS در نهایت کامپایل و به CSS تبدیل می‌شوند.

[dw-note color="green"]برای اطمینان از کیفیت دوره، 2 جلسه از این دوره را به صورت رایگان برای شما در بخش زیر قرار دادیم که با خیال راحت بتوانید دانلود و از کیفیت عالی این دوره اطمینان پیدا کنید.[/dw-note]