دوره آموزش Sass/SCSS برای مدیریت استایل‌ها همراه با فلش‌کارت آموزشی — ارائه روی فلش مموری

🎓 دوره آموزشی جامع

📚 اطلاعات دوره

عنوان دوره: دوره آموزش Sass/SCSS برای مدیریت استایل‌ها

موضوع کلی: برنامه نویسی

موضوع میانی: توسعه وب: فرانت‌اند**

📋 سرفصل‌های دوره

• 1. آشنایی با CSS و محدودیت‌های آن
• 2. چرا به Sass/SCSS نیاز داریم؟
• 3. معرفی Sass و SCSS
• 4. تفاوت Sass و SCSS (Syntax)
• 5. نصب Sass (Command Line)
• 6. نصب Sass (Text Editor Extensions)
• 7. مقدمه‌ای بر کامپایل Sass (Watch Mode)
• 8. تنظیمات اولیه یک پروژه Sass
• 9. متغیرها در Sass (Variables)
• 10. نحوه تعریف و استفاده از متغیرها
• 11. محدوده متغیرها (Scope of Variables)
• 12. انواع داده در Sass (Data Types)
• 13. رشته‌ها (Strings)
• 14. اعداد (Numbers)
• 15. رنگ‌ها (Colors)
• 16. مقادیر بولی (Booleans)
• 17. مقادیر null
• 18. لیست‌ها (Lists)
• 19. نقشه‌ها (Maps)
• 20. آرگومان‌های توابع (Function Arguments)
• 21. نحوه استفاده از توابع در Sass
• 22. توابع ریاضی در Sass (Math Functions)
• 23. توابع رشته‌ای در Sass (String Functions)
• 24. توابع رنگی در Sass (Color Functions)
• 25. توابع لیستی در Sass (List Functions)
• 26. توابع نقشه‌ای در Sass (Map Functions)
• 27. دستور @import در Sass
• 28. نحوه ایمپورت کردن فایل‌ها
• 29. نکاتی برای سازماندهی فایل‌ها با @import
• 30. ساختار پوشه‌ها (Folder Structure)
• 31. استفاده از _ (UnderScore) برای فایل‌های Partial
• 32. دستور @mixin در Sass
• 33. نحوه تعریف و فراخوانی Mixin ها
• 34. Mixins با آرگومان (Mixins with Arguments)
• 35. Mixins با مقادیر پیش‌فرض (Default Arguments)
• 36. نحوه بازگرداندن مقادیر از Mixins (@return)
• 37. دستور @extend در Sass
• 38. نحوه استفاده از @extend برای اشتراک‌گذاری استایل‌ها
• 39. تفاوت @extend با Mixins
• 40. نکات و بهترین شیوه‌ها برای @extend
• 41. دستور @if، @else if، @else در Sass
• 42. استفاده از شرط‌ها در Sass
• 43. اعمال استایل‌های شرطی
• 44. حلقه‌ها در Sass: @for
• 45. استفاده از حلقه @for با اعداد
• 46. استفاده از حلقه @for با لیست‌ها
• 47. حلقه‌ها در Sass: @each
• 48. استفاده از حلقه @each برای لیست‌ها
• 49. استفاده از حلقه @each برای نقشه‌ها
• 50. حلقه‌ها در Sass: @while
• 51. استفاده از حلقه @while
• 52. نکات و بهترین شیوه‌ها برای حلقه‌ها
• 53. فضاهای نام (Namespaces) در Sass
• 54. استفاده از فضای نام برای سازماندهی Mixins و توابع
• 55. قابلیت‌های پیشرفته Mixins
• 56. Extend vs Include
• 57. نکات پیشرفته متغیرها
• 58. توابع سفارشی (Custom Functions)
• 59. ایجاد توابع سفارشی برای منطق پیچیده
• 60. بررسی و دیباگ کردن کد Sass
• 61. استفاده از Sass Debugging Tools
• 62. خطاهای رایج در Sass و راه حل آنها
• 63. بهینه‌سازی خروجی Sass
• 64. تنظیمات کامپایلر Sass (Output Style)
• 65. فشرده‌سازی (Minification) استایل‌های CSS
• 66. تنظیمات Source Maps
• 67. کار با فریم‌ورک‌های CSS مدرن (مانند Bootstrap/TailwindCSS)
• 68. سفارشی‌سازی فریم‌ورک‌ها با Sass
• 69. نحوه استفاده از متغیرهای فریم‌ورک
• 70. نحوه استفاده از Mixins فریم‌ورک
• 71. توسعه کامپوننت‌های UI با Sass
• 72. ساخت سیستم طراحی (Design System) با Sass
• 73. استفاده از Sass در پروژه‌های بزرگ
• 74. مدیریت وابستگی‌های Sass (Dependency Management)
• 75. نکات پیشرفته سازماندهی کد Sass
• 76. تکنیک‌های پیشرفته کامپایل Sass
• 77. استفاده از ابزارهای Task Runner (Gulp/Webpack) برای Sass
• 78. پلاگین‌های مفید Sass
• 79. مفاهیم پیشرفته Sass
• 80. عملیات روی رنگ‌ها (Color Operations)
• 81. تنظیم شفافیت رنگ‌ها (Alpha Transparency)
• 82. استفاده از مقادیرHSL و RGBa
• 83. کارهای پیشرفته با لیست‌ها و نقشه‌ها
• 84. نحوه دسترسی به عناصر خاص در لیست‌ها و نقشه‌ها
• 85. تنظیمات پیشرفته @for و @each
• 86. استفاده از Logic پیچیده با ترکیب دستورات
• 87. ایجاد هرم‌های استایل (Style Hierarchies)
• 88. استفاده از Sass برای ایجاد Responsive Design
• 89. دستور @media در Sass
• 90. مدیریت استایل‌های مختلف برای دستگاه‌های متفاوت
• 91. تکنیک‌های پیشرفته Responsive Design با Sass
• 92. نحوه پیاده‌سازی سیستم گرید (Grid System) با Sass
• 93. ایجاد سیستم گرید سفارشی
• 94. بهترین شیوه‌ها برای ساختاردهی فایل‌ها
• 95. استفاده از Sass برای انیمیشن‌ها و ترانزیشن‌ها
• 96. نکات امنیتی در Sass
• 97. نحوه ادغام Sass با JavaScript Frameworks
• 98. مبانی Sass برای پروژه های React/Vue/Angular
• 99. مدیریت استایل ها در پروژه های SPA
• 100. استفاده از CSS Modules با Sass