کارگاه آموزش SASS و Compass از پایه تا پیشرفته

کارگاه آموزش SASS و Compass از پایه تا پیشرفته



SASS چیست ؟

Sass مخفف Syntactically Awesome Style Sheets است و یک زبان پیش پردازنده CSS یا CSS Preprocessor Language به حساب می آید .
Sass اساسا یک روش توسعه یافته از کدنویسی در CSS همراه با Syntax به حساب می آید .
تعدادی تصورات غلط راجب Sass برای افرادی که اصلا از آن استفاده نکرده اند وجود دارد .
یکی از این تصورات غلط این است که آیا Sass جایگزین CSS است ؟
خیر ، Sass جایگزین CSS نیست ، بلکه یک روش برای کوتاه تر نویسی CSS است که در نهایت پس از Compile شدن به همان CSS تبدیل می شود .

تبدیل Sass به CSS

برداشت اشتباهی که خیلی از افراد از Sass دارند این است که پس از اتمام کار می بایست فایل ها (.scss ، .sass) مستقیما روی سرور قرار گیرند تا مرورگر آنها را بخواند .
متاسفانه این برداشت اشتباه است ، چون پس از کدنویسی در Sass شما می بایست برای خواندن مرورگر آن را به فایل CSS تبدیل کنید .
به این حالت که شما می بایست به صورت Local کدنویسی خود را انجام دهید و بعد از Compile آن ، خروجی CSS را روی سرور قرار دهید .
برای Compile یا تبدیل Sass به CSS می توانید با استفاده از Ruby و نصب Sass روی آن و یا نرم افزارهایی همچون Prepros ، این کار را به صورت لحظه به لحظه و یا یک باره انجام دهید .

چرا SASS ؟

اگر شما با برنامه نویسان کامپیوتری در مورد کدنویسی Front-end صحبت کرده اید ، آن ها به شما گفته اند که HTML و CSS زبان احمقانه ای است چون کدهای آن از پیش تعریف شده است و بارها و بارها تکرار می شود . حقیقت این است که آنها در این مورد نصف شما حق دارند .
زبان های برنامه نویسی مانند C++ دارای یک مفهوم رایج به نام DRY یا Don’t Repeat Yourself (تکرار نکردن) مواجه هستند و نمی توانند همچون طراحان Front-end کدهای زیادی را کپی کنند .
آنها با مفاهیم ساختی همچین تعریف توابع و … روبرو هستند .
ولی این دلیل نمی شود که شما در برابر دوستان برنامه نویس خود سرخورده شوید !
اینجا است که Sass وارد می شود …
شما می توانید با استفاده از Syntax ها و نوشتن توابع سرعت و قدرت خود را در کدنویسی Front-end افزایش دهید و هم به دوستان برنامه نویس خود بگویید که کدنویسی Front-end آن چنان هم که فکر می کنند بد نیست .

حالا نقش آکادمی مجید آنلاین چیست ؟ آکادمی مجید آنلاین SASS و Compass را در قالب کارگاه فشرده برگزار می کند تا طراحان رابط کاربری و Front End بتوانند با لذت و قدرت بیشتری طراحی کنند.

موضوع کارگاه:

در خلال این دوره ابتدای دوره شما با مقدمات pre-processor CSSها آشنا می شوید، pre-processor چیست و چرا بایستی از آنها استفاده کرد، چگونه آن را نصب می کنیم و خط فرمان و نرم افزارهای متداول معرفی می شود، در ادامه با مفاهیم کلی SASS همچون متغیرها، Mixinها، تودرتو نویسی استایل ها، توابع و ... آشنا می شوید، سپس Compass معرفی و امکانات آن همچون mixinها و توابع CSS3 ، کار با تابع های رنگ در طراحی، Helperها و ابزارهای آن برای طراحی ریسپانسیو وب معرفی می شود.
در طول این کارگاه بیش از صد مثال عملی مطرح می شود که محدوده اکثریت مفاهیم مقدماتی تا پیشرفته SASS و Compass‌ را در بر می گیرد و به روش تعامل با دانشجویان بصورت طرح مساله و پاسخ دوطرفه سعی بر آنست در پایان گذراندن این کارگاه، بصورت حرفه ای از مفاهیم و ابزارهای SASS و Compass در پروژه های طراحی وب استفاده نماید.
توضیح مهم اینکه برای درک بهتر ساختار پروژه پایانی کارگاه و خروجی آن ، پیشنهاد می شود مشخصات سیستم گرید معروف 960.gs را قبل از کارگاه ملاحظه بفرمایید.

توجه:

- هنرجویان قبلی آکادمی مجیدآنلاین از تخفیف 10% در این دوره برخوردار خواهند بود
- برای شرکت در این کارگاه هنرجویان می بایست، لپ تاپ همراه خود بیاورند.


شامل:

  • معرفی CSS Pre-Processorها
  • نحوه انتخاب، نصب، فرامین
  • آموزش SASS
  • آموزش Compass

پیش نیاز:

آشنایی با مفاهیم کلی طراحی سایت، آشنایی مقدماتی با CSS3

مباحث اصلی و کلی دوره :

مفاهیم مقدماتی

  • pre-processor CSSها و هدف استفاده از آنها
  • SASS چیست؟ Compass چیست؟
  • نصب SASS و Comapss
  • نرم افزارهای (ابزارهای گرافیکی) موجود برای کار با SASS و Compass
  • ایجاد پروژه جدید SASS و Compass
  • سینتکس SASS و SCSS
  • تنظیمات پروژه، pluginهای موجود، تنظیم خروجی فایلهای CSS
  • ساخت و استفاده از فایلهای Partial در پروژه
  • انواع داده ایی، متغیرها، commentها و اپراتورها
  • مفهوم Nesting سینتکس قسمت اول
  • دایرکتیو Extend و Placehoderها
  • Mixinها و توابع از پیش ساخته و سفارشی CSS3 در Compass
  • کار و دستکاری رنگ با توابع موجود SASS و Compass

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

  • مفهوم Nesting سینتکس قسمت دوم
  • Media Queryها و bubbling
  • Mixinهای پیچیده
  • Mixin هایGradient Multiple columns, Border-raduis, Background, و ...
  • CSS transforms و CSS Filters و Transitionها
  • ایجاد تصاویر sprite بصورت اتوماتیک
  • ساخت data URI ها از تصاویر
  • ایجاد گرید برای طراحی صفحات
  • مروری بر سیستم گرید Susy و مفاهیم و ابزارها و Helperهای آن برای طراحی ریسپانسیو
  • ساخت و استفاده از تابع ها در SASS
  • محاسبات ریاضی با SASS
  • ساختارها و توابع کنترلی در SASS
  • ساخت سیستم گرید معروف 960.gs بوسیله مفاهیم و دستورات SASS
  • مفاهیم جدید در SASS 3.3
کد دوره : MO0113

اخبار آکادمی مجیدآنلاین

معرفی اساتید

معرفی شاهو طوفانی

شاهو طوفانی

طراح و برنامه نویس وب

نظرات هنرجویان

  • سید امیرمحمد تجاره (کارگاه تبدیل قالب PSD به XHTML همراه با jQuery) :

    اگر میخواهید یک قالب PSD را به XHTML تبدیل کنید، به شما این دوره آموزشی را پیشنهاد میکنم که بی شک با توان بالای استاد علوی زاده، شما نیز حرفه ای خواهید شد.

  • زینب فدایی (ورود به دنیای PHP) :

    از مهمترین ویژگی های این کلاس، دانش بسیار خوب و بالای استاد و ارتباط با زبان PHP، پاسخ به سوالات با تامل و حوصله و نیز وقت شناسی استا. به علاوه اینکه موارد مطرح شده هم به صورت آکادمیک و هم غیر آکادمیک (کاربردهای موارد در دنیای تجارت) مطرح می شوند. همچنین پروژه نوشته شده در کلاس به صورت کامل قابل استفاده می باشد. از کلیه زحمات جناب مهندس علوی زاده و جناب آقای ونکی کمال تشکر را می نمایم. با سپاس از زحمات بی شائبه استاد.

  • حامد اسلامی (HTML و CSS را از پایه یاد بگیرید) :

    سطح علمی و برخورد استاد فراتر از آنچه تصور می کردم، بود. واقعاً دوره ی پربار و لذت بخشی بود. قطعاً در دوره های بعدی هم شرکت خواهم کرد.

  • بهزاد حسین پور (HTML و CSS را از پایه یاد بگیرید) :

    دوره های مفید با یک استاد مفید!