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

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

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

عنوان دوره: Sass/SCSS: تکنیک‌های پیشرفته در Sass/SCSS برای توسعه‌دهندگان حرفه‌ای

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

موضوع میانی: Sass/SCSS

📋 سرفصل‌های دوره (100 موضوع)

• 1. مقدمه ای بر Sass و SCSS: چرا Sass؟
• 2. نصب و راه اندازی Sass و SCSS
• 3. تنظیمات اولیه پروژه Sass
• 4. کامپایل Sass به CSS: روش های مختلف
• 5. متغیرها در Sass: تعریف و استفاده
• 6. انواع داده در Sass: اعداد، رشته ها، لیست ها، نقشه ها
• 7. عملگرها در Sass: محاسبات و منطق
• 8. Mixin ها در Sass: تعریف و استفاده مجدد
• 9. آرگومان ها در Mixin ها: پارامترها و مقادیر پیش فرض
• 10. Content Block ها در Mixin ها: پاس کردن محتوا به Mixin
• 11. شامل کردن (Include) Mixin ها: استفاده از Mixin ها در CSS
• 12. Extend/Inheritance در Sass: ارث بری استایل ها
• 13. Placeholders در Sass: تفاوت با کلاس ها و کاربرد
• 14. توابع (Functions) در Sass: تعریف و استفاده
• 15. ساخت توابع سفارشی در Sass: مثال های کاربردی
• 16. دستورات کنترلی در Sass: If/Else
• 17. دستورات کنترلی در Sass: For Loops
• 18. دستورات کنترلی در Sass: While Loops
• 19. دستورات کنترلی در Sass: Each Loops
• 20. لیست ها در Sass: ایجاد و دسترسی به عناصر
• 21. توابع لیست در Sass: append, nth, index, join
• 22. نقشه ها در Sass: ایجاد و دسترسی به مقادیر
• 23. توابع نقشه در Sass: map-get, map-merge, map-keys
• 24. استفاده از @at-root در Sass: خروج از Scope
• 25. استفاده از @debug در Sass: اشکال زدایی کد
• 26. استفاده از @warn در Sass: نمایش پیام های اخطار
• 27. استفاده از @error در Sass: نمایش پیام های خطا
• 28. وارد کردن (Import) فایل های Sass: مدیریت فایل ها
• 29. پارشال ها (Partials) در Sass: سازماندهی کد
• 30. ساختاردهی پروژه Sass: روش های مختلف
• 31. نامگذاری کلاس ها در Sass: BEM, SMACSS, OOCSS
• 32. نوشتن کامنت در Sass: مستندسازی کد
• 33. نکات نگهداری کد در Sass: خوانایی و سازماندهی
• 34. بهینه سازی کد Sass: کاهش حجم فایل CSS
• 35. استفاده از Sourcemaps در Sass: اشکال زدایی در مرورگر
• 36. Git و Sass: مدیریت تغییرات کد
• 37. Sass و Bootstrap: استفاده از متغیرها و Mixin های Bootstrap
• 38. Sass و Materialize: سفارشی سازی استایل ها
• 39. Sass و Foundation: تنظیمات پیشرفته
• 40. استفاده از Grid Systems در Sass
• 41. ایجاد Grid System سفارشی با Sass
• 42. استفاده از Flexbox در Sass
• 43. ایجاد Flexbox Grid System با Sass
• 44. Sass و انیمیشن ها: ایجاد انیمیشن های پیچیده
• 45. keyframes در Sass: تعریف انیمیشن ها
• 46. انتقال ها (Transitions) در Sass: افزودن جلوه های حرکتی
• 47. ایجاد افکت های ویژه با Sass
• 48. تکنیک های پیشرفته پاسخگو (Responsive) کردن سایت با Sass
• 49. Breakpoints در Sass: تعریف و استفاده
• 50. Media Queries در Sass: نوشتن شرط های رسانه ای
• 51. تکنیک های تایپوگرافی در Sass
• 52. تنظیم فونت ها و سایزها در Sass
• 53. ایجاد تم های مختلف با Sass: متغیرها و Mixin ها
• 54. متغیرهای CSS در Sass: استفاده همزمان
• 55. Custom Properties در Sass: Dynamic Styling
• 56. کار با SVG ها در Sass: استایل دهی به SVG
• 57. ایجاد آیکون های سفارشی با Sass
• 58. ادغام Sass با فریم ورک های جاوا اسکریپت (React, Vue, Angular)
• 59. Sass Modules: بهبود سازماندهی و قابلیت استفاده مجدد
• 60. پکیج کردن و توزیع Sass Libraries
• 61. ایجاد کامپوننت های قابل استفاده مجدد با Sass
• 62. استفاده از Sass در پروژه های بزرگ: مقیاس پذیری
• 63. تست کد Sass: اطمینان از کیفیت کد
• 64. ابزارهای تست Sass: True, Sass Spec
• 65. استفاده از Linters در Sass: رعایت استانداردهای کدنویسی
• 66. Autoprefixer: افزودن پیشوندهای مرورگر به صورت خودکار
• 67. CSS Modules و Sass: ترکیب دو تکنولوژی
• 68. Webpack و Sass: تنظیمات پیشرفته
• 69. Gulp و Sass: اتوماسیون وظایف
• 70. Grunt و Sass: پیکربندی تسک ها
• 71. PostCSS و Sass: پردازش CSS بعد از کامپایل
• 72. استفاده از CSS Variables در Sass
• 73. ایجاد طرح بندی های پیچیده با Sass
• 74. ایجاد افکت های پارالاکس با Sass
• 75. ساخت Navigation Bar با Sass
• 76. ساخت فرم های سفارشی با Sass
• 77. ایجاد دکمه های زیبا با Sass
• 78. ساخت کارت های (Cards) سفارشی با Sass
• 79. استفاده از Sass برای ایمیل مارکتینگ
• 80. بهینه سازی Sass برای سرعت بارگذاری صفحه
• 81. Lazy Loading تصاویر با Sass
• 82. استفاده از Sass برای Accessibility
• 83. ایجاد استایل های پرینت با Sass
• 84. استفاده از Sass برای RTL (Right-to-Left) Layout
• 85. استفاده از Sass برای Color Schemes
• 86. ایجاد سایه ها و گرادینت های زیبا با Sass
• 87. استفاده از Sass برای افکت های Hover
• 88. استفاده از Sass برای افکت های Focus
• 89. Sass و معماری Atomic Design
• 90. استفاده از Sass برای Style Guides
• 91. ایجاد مستندات استایل با Sass
• 92. ابزارهای مستندسازی Sass: Styleguides.io
• 93. بهترین شیوه ها در توسعه Sass
• 94. جلوگیری از Anti-Patterns در Sass
• 95. اشکال زدایی و رفع ایرادات رایج Sass
• 96. Sass و Performance: نکات کلیدی
• 97. استفاده از Preprocessors دیگر: Less, Stylus
• 98. مقایسه Sass با Less و Stylus
• 99. آینده Sass و CSS
• 100. منابع یادگیری بیشتر Sass