مدرس :
محل آکادمی هنرهای دیجیتال مجیدآنلاین تغییر کرده است که بدین وسیله به اطلاع کلیه هنرجویان می رساند. آدرس ...
کارگاه آموزش 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
