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