آموزش مقدماتی پیش پردازنده Sass برای توسعه CSS

توضیحات تکمیلی

نسخه CSS3 در سال 2014 با امکانات فراوان در زمینه های مختلفی مانند انیمیشن منتشر شد و پس از آن طراحی صفحات وب، رشد چشمگیری را تجربه کردند. همگام با این رشد چشمگیر، استایل دهی با CSS مستلزم نوشتن خطوط زیادی از کد شد و این روند تا آنجایی ادامه پیدا کرد که نسخه 4 فریم ورک محبوب و نام آشنای بوت استرپ (Bootstrap) شامل حدودا 10 هزار خط کد CSS است.

مطمئنا کنترل و تسلط روی این حجم از کد کار دشواری است. تصور کنید شما صفحه ای را طراحی کرده اید و از ترکیب رنگی سبز برای این صفحات استفاده کرده اید و حال قصد تغییر این ترکیب رنگی به آبی را دارید. به نظرتان چقدر زمان نیاز است که ترکیب رنگی جدید در 10 هزار خط کد CSS بدون هیچ خطایی اعمال شود؟ یا 10 درصد تیره کردن رنگ فعلی سایت چقدر حوصله نیاز دارد؟

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

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

فهرست سرفصل‌ها و رئوس مطالب مطرح شده در اين مجموعه آموزشی، در ادامه آمده است:

• درس یکم: آشنایی با زبان اسکریپت نویسی Sass
  • مقدمه
  • مفهوم پیش پردازنده
  • تفاوت Sass و Scss
• درس دوم: نصب و اجرا
  • نصب در ویندوز (Windows)
  • نصب در لینوکس (Linux)
  • ایجاد اولین پروژه
  • تنظیم Watch
• درس سوم: دستورهای Sass
  • کامنت ها
  • متغیرها
  • انواع داده
  • عملگرهای ریاضیاتی
  • عملگرهای تساوی
  • عملگرهای مقایسه
  • عملگرهای منطقی
  • عملگر رنگ ها
  • عملگر & (Ampersand)
  • درج متغیر در رشته ها
• درس چهارم: Partials & Imports
  • Partials
  • Imports
• درس پنجم: Mixin و وراثت
  • معرفی Mixin
  • Mixin با پارامتر ورودی
  • وراثت
  • Placeholder Selectors
  • تفاوت Mixin با Extend
• درس ششم: دستورهای تو در تو
  • دستورهای تو در تو
  • ویژگی های تو در تو
• درس هفتم: مباحث تکمیلی
  • لیست ها
  • تابع nth
  • Maps
  • At - root
• درس هشتم: توابع
  • معرفی توابع
  • توابع از پیش تعریف شده
  • تعریف تابع
  • استفاده از توابع
• درس نهم: شرط ها و حلقه ها
  • if و else if, else
  • حلقه for
  • حلقه each
  • حلقه while
• درس دهم: فریم ورک ها
  • Bourbon
  • Bourbon Neat
  • Bourbon – Bitters
  • Compass
• درس یازدهم: ابزارها و تکنیک ها
  • Scout - App
  • تبدیل CSS به Sass

مفید برای

• مهندسی کامپیوتر

پیش نیاز