آموزش CSS pre-processors در طراحی وب سایت



سرفصل ها و محتوای دوره آموزش اصول استفاده از CSS pre-processors در طراحی وب سایت




هدف: پس از آموختن اصول اولیه طراحی وبسایت HTML و CSS در پروژه‌های واقعی لازم است که با فریمورک‌های پرکاربردی نظیر Twitter Bootstrap کارکنید، بتوانید این فریموورک ها را شخصی‌سازی کنید و یا اینکه حتی برای پروژه خود فریمورک جدیدی را ایجاد کنید. در زمان طراحی به مشکلات متعددی روبرو خواهید شد، نظیر :
    1- تعدد فایل‌های CSS و نحوه مدیریت آن‌ها، به ویژه کنترل Order Of Precedence.
    2- استفاده مجدد و اعمال تغییرات مانند تغییر رنگ خاص و ...
    3- Responsive Design و نوشتن Media Queryها می‌تواند در شرایطی سخت و زمان‌گیر باشد.
    4- افزایش بی رویه تعداد قوانین CSS ای و دوباره نویسی‌هایی که مدیریت کد را مشکل‌ساز می‌کند.

برای حل این مشکلات بزرگ و به منظور پیوند مفاهیم طراحی شما با دنیای برنامه‌نویسی از Preprocessorها استفاده می‌شود. پس از گذراندن این دوره شما می‌توانید نقش یک توسعه دهنده سمت کاربر (Front-End Developer) موثر را در یک تیم تولید وبسایت یا وب اپلیکیشن بازی کنید و یا پروژه و قالب‌های وب منحصر به فردی را توسعه دهید.


پیش نیاز: آشنایی کلی با اصول طراحی وب سایت نظیر HTML5, CSS3 و ترجیحا JavaScript

سرفصل‌های کلی دوره:

     1-معرفی CSS Pre-Processorها

    2- نحوه انتخاب، نصب، فرامین

    3- آموزش SASS

    4- آموزش Compass


مباحث اصلی دوره :
   
   مفاهیم مقدماتی :

pre-processor CSS ها و هدف استفاده از آنها

SASS چیست؟ Compass چیست؟

نصب SASS و Comapss

        نرم افزارهای (ابزارهای گرافیکی) موجود برای کار با SASS و Compass

       ایجاد پروژه جدید SASS و Compass

       Syntax  SASS و SCSS

       تنظیمات پروژه، pluginهای موجود، تنظیم خروجی فایلهای CSS

       ساخت و استفاده از فایلهای Partial در پروژه

       انواع داده ایی، متغیرها، commentها و اپراتورها

       مفهوم Nesting سینتکس قسمت اول

      دایرکتیو Extend و Placehoderها

       Mixinها و توابع از پیش ساخته و سفارشی CSS3 در Compass

       کار و دستکاری رنگ با توابع موجود SASS و Compass


   مفاهیم پیشرفته  :

مفهوم Nesting Syntax 

Media Queryها و bubbling

Mixinهای پیچیده

Mixin هایGradient Multiple columns, Border-raduis, Background, و ...

CSS transforms و CSS Filters و Transitionها

ایجاد تصاویر sprite بصورت اتوماتیک

ساخت data URI ها از تصاویر

ایجاد گرید برای طراحی صفحات

مروری بر سیستم گرید و مفاهیم و ابزارها و Helperهای آن برای طراحی Responsive

ساخت و استفاده از تابع ها در SASS

محاسبات ریاضی با SASS

ساختارها و توابع کنترلی در SASS

ساخت سیستم گرید نمونه بوسیله مفاهیم و دستورات SASS

مفاهیم جدید در SASS 3.4.22