آموزش رایگان Sass در مکتب‌خونه — از صفر تا پروژه واقعی 🎨
Sass یا همون Syntactically Awesome Style Sheets، یکی از محبوب‌ترین پیش‌پردازنده‌های CSS هست که خیلی از تیم‌های فرانت‌اند امروز دارن ازش استفاده می‌کنن. اگه اهل نوشتن استایل‌های طولانی و تکراری هستی، Sass می‌تونه نجات‌دهنده‌ت باشه. این دوره...
آموزش رایگان Sass در مکتب‌خونه — از صفر تا پروژه واقعی 🎨
Sass یا همون Syntactically Awesome Style Sheets، یکی از محبوب‌ترین پیش‌پردازنده‌های CSS هست که خیلی از تیم‌های فرانت‌اند امروز دارن ازش استفاده می‌کنن. اگه اهل نوشتن استایل‌های طولانی و تکراری هستی، Sass می‌تونه نجات‌دهنده‌ت باشه. این دوره هم به‌صورت کاملاً رایگان در مکتب‌خونه ارائه شده و برای شروع یادگیری این ابزار، نقطه‌ی خوبیه.
مشخصات دوره در یک نگاه
عنوان
جزئیات
نام دوره
آموزش رایگان Sass
ارائه‌دهنده
مکتب‌خونه
مدرس/تولیدکننده
وب‌پروگ
تعداد فصل‌ها
۲ فصل (آشنایی با Sass + پروژه)
تعداد جلسات
۱۱ جلسه
مدت زمان کل
حدود ۲ ساعت و ۳۰ دقیقه
سطح
مقدماتی تا متوسط
هزینه
رایگان ✅
چرا این دوره رو انتخاب کنم؟
Sass در واقع یه زبان سبک‌دهی توسعه‌یافته‌ست که به CSS قدرت و ظرافت اضافه می‌کنه. جالبه بدونید که این ابزار در ابتدا توسط «هامتون کالتی» طراحی و بعدها توسط «ناتالی ویزنباوم» در سال ۲۰۰۶ توسعه پیدا کرد. Sass جایگزین CSS نیست؛ بلکه راهی برای کوتاه‌تر نویسی و کاهش تکرار در کدهاست. یعنی همون چیزی که هر برنامه‌نویس فرانت‌اند بعد از چند پروژه واقعی، دلش می‌خواد.
نکته‌ی مهم اینه که استفاده از Sass باعث صرفه‌جویی قابل‌توجهی در زمان می‌شه و کدها رو تمیزتر و خواناتر می‌کنه. توی این دوره با جنبه‌های مختلف این ابزار آشنا می‌شی و می‌تونی توی پروژه‌های شخصی و تجاری ازش استفاده کنی.
توی این دوره چی یاد می‌گیرم؟
آشنایی کامل با مفهوم پیش‌پردازنده CSS و تفاوتش با CSS خام
کار با متغیرها (variables)، تودرتویی (nesting) و میکسین‌ها (mixins)
نحوه‌ی نصب Sass به روش‌های مختلف مثل npm، command-line و افزونه‌ها
تفاوت Sass و SCSS و اینکه کدوم یکی برای شروع بهتره
وراثت (inheritance)، ایمپورت و اکسپورت، و توابع داخلی برای دست‌کاری رنگ‌ها
پیاده‌سازی یک پروژه‌ی عملی برای تثبیت یادگیری
ویژگی‌های Sass که باید بدونی
Sass یه سری قابلیت‌های منحصربه‌فرد داره که مهم‌ترین‌هاش این‌هاست:
نسبت به CSS پایدارتر، زیباتر و قدرتمندتر عمل می‌کنه
از متغیرها، nesting و mixins به‌شکل کاملاً سازگار با CSS پشتیبانی می‌کنه
توابع مفید زیادی برای تغییر رنگ و مقادیر مختلف در اختیارت می‌ذاره
امکان تولید خروجی well-formatted و سفارشی رو فراهم می‌کنه
پیش‌پردازنده‌ی متن‌بازیه که به CSS قابل‌خواندن تفسیر می‌شه
دستورالعمل‌های کنترلی برای کتابخانه‌ها و ماژول‌ها داره
این دوره برای چه کسانی مناسبه؟
دانشجوها و افرادی که تازه وارد دنیای فرانت‌اند شدن
طراحان وب که می‌خوان سطح طراحی‌هاشون رو ارتقا بدن
برنامه‌نویسان رابط کاربری که دنبال ابزارهای حرفه‌ای‌تر برای پروژه‌هاشون هستن
هر کسی که می‌خواد وب‌سایت یا وبلاگ شخصی‌اش رو جذاب‌تر و کارآمدتر کنه
اگه یه پروژه‌ی دانشجویی مثل ساخت یه سایت نمونه‌کار داری و استایل‌هات داره از کنترل خارج می‌شه، Sass دقیقاً همون چیزیه که کمکت می‌کنه ساختار رو حفظ کنی و کد تکراری ننویسی.
مزایا و معایب Sass
مزایا:
نوشتن CSS تمیز، کم‌حجم و قابل نگهداری
انعطاف‌پذیری بیشتر نسبت به CSS معمولی
سازگاری با تمام نسخه‌های CSS و کتابخانه‌های موجود
افزایش سرعت کار طراحان و توسعه‌دهندگان
معایب:
نیاز به صرف زمان برای یادگیری ویژگی‌های جدید پیش از استفاده
از دست دادن امکان بازرسی عنصر داخلی مرورگر برای کدهای Sass
البته نگران نباش؛ یادگیری Sass اونقدرها هم سخت نیست و همین دوره‌ی رایگان می‌تونه نقطه‌ی شروع خیلی خوبی باشه.
Sass در مقابل SCSS — کدوم رو انتخاب کنم؟
Sass دو سینتکس مجزا داره: Sass و SCSS. هر دو کار مشابهی انجام می‌دن، ولی سبک نوشتارشون فرق می‌کنه.
مزیت Sass: تایپ کوتاه‌تر و راحت‌تره؛ نیازی به نقطه‌ویرگول یا پرانتز نداری و استانداردهای کد نویسی تمیزی ارائه می‌ده.
مزیت SCSS: کاملاً با CSS سازگاره؛ حتی می‌تونی پسوند یه فایل CSS رو به .scss تغییر بدی و همچنان کار کنه. به همین دلیل یادگیریش راحت‌تره.
نحوه نصب Sass
Sass رو می‌شه به چند روش پیاده‌سازی کرد:
با استفاده از عبارت import
با استفاده از Node و npm
با استفاده از ابزار Command-line
با استفاده از ماژول Standalone-Ruby
با نصب افزونه در ادیتور
توی دوره، همه‌ی این روش‌ها قدم‌به‌قدم آموزش داده می‌شه تا هر کسی با هر سیستمی بتونه Sass رو راه‌اندازی کنه.
Sass چطور کار می‌کنه؟
مرورگرها نمی‌تونن فایل Sass رو مستقیم بخونن. به همین دلیل از یه پیش‌پردازنده استفاده می‌شه که کد Sass رو به CSS قابل‌فهم تبدیل می‌کنه. به این فرآیند transpiling می‌گن و ابزاری که این کار رو انجام می‌ده، transpiler نام داره.
تفاوت بوت‌استرپ و Sass چیه؟
بوت‌استرپ یه فریم‌ورک فرانت‌انده، در حالی که Sass یه پیش‌پردازنده برای CSS به حساب میاد. جالبه بدونی که توی خود بوت‌استرپ هم از ویژگی‌های Sass مثل میکسین‌ها، وراثت انتخاب‌گر و متغیرها استفاده می‌شه. یعنی اگه Sass رو یاد بگیری، درک بوت‌استرپ هم برات راحت‌تر می‌شه.
ساختار فصل‌های دوره
فصل
عنوان
تعداد جلسات
مدت زمان
۱
آشنایی با Sass
۶ جلسه
۰۱:۰۶ ساعت
۲
پروژه
۵ جلسه
۰۱:۲۳ ساعت
سوالات متداول
آیا این دوره واقعاً رایگانه؟
بله، دوره آموزش Sass در مکتب‌خونه کاملاً رایگان ارائه شده و همراه با فایل‌های تمرینی و ویدیو در اختیارت قرار می‌گیره.
پیش‌نیاز این دوره چیه؟
آشنایی مقدماتی با HTML و CSS کافیه. اگه با مفاهیم
