کارگاه آموزش 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
مدرس :
شاهو طوفانی

مدت زمان دوره :

۱۰ ساعت (۲ جلسه ۵ ساعته)

شهریه دوره :

---

شروع دوره :

-- متعاقبا اعلام می گردد --

زمان برگزاری دوره :

-- متعاقبا اعلام می گردد --

دوره های مرتبط :

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

معرفی اساتید

معرفی رامین خطیبی

رامین خطیبی

طراح تجربه‌ی کاربری و رابط کابری برای اپلیکیشن‌های موبایل

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

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

    در آکادمی مجیدآنلاین علاوه بر محیطی راحت جهت آموزش ، اساتید مجرب و با تجربه همچون آقای علوی زاده وجود دارند که از تمامی زحماتی که کشیدند تشکر میکنم.

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

    این کلاس اولین دوره ای بود که در زمینه طراحی سایت شرکت کردم، لذا سطح کلاس و برخورد استاد بسیار برایم مهم بود که بسیار عالی برآورده شد و من را برای ادامه این رشته و گذاشتن وقت بیشتر در این مباحث بسیار ترغیب کرد. از استاد دوره جناب آقای علوی زاده سپاسگذارم.

  • سهیلی (جلوه های ویژه بصری) :

    کلاس های جلوه های ویژه بصری و افتر افکت مجیدآنلاین باعث شد تا بتوانم به صورت حرفه ای فعالیت کنم. ممنونم.

  • عماد مقدم (طراحی سایت) :

    دوره های مجیدآنلاین اینقدر برای من مفید بود که بیش از 3 دوره از کلاس های مجیدآنلاین رو شرکت کردم.