دوره آموزشی CSS به Sass: تبدیل یک سایت موجود
2 ساعت 32 دقیقهمتوسط2016-02-12
مدرسین

John Riviello
Engineer and Lead Front-End Developer at Comcast
جزئیات دوره
Sass نسل بعدی CSS است و بسیاری از توسعهدهندگان در پروژههای جدید خود از این فناوری برای بهینهسازی و تسریع فرایند استایلدهی استفاده میکنند. اما آیا میتوان مزایای Sass را به وبسایتهای قدیمی نیز اضافه کرد؟ ✅ پاسخ: بله!
با تغییر نحوه نوشتن CSS به Sass، میتوان عملکرد بهتری در مدیریت استایلهای پروژه داشت. علاوه بر این، تبدیل یک سایت قدیمی به Sass یک روش عالی برای یادگیری این فناوری و درک نحوه کامپایل شدن آن به CSS است.
🔹 در این دوره آموزشی، شما یاد خواهید گرفت:
✔ چرا libSass گزینه بهتری نسبت به Ruby Sass است؟
✔ راهاندازی محیط توسعه Sass با Node.js و Grunt
✔ تبدیل CSS معمولی به SCSS و بهینهسازی آن
✔ تعریف متغیرها و میکسینهای ضروری برای سادهسازی کدها
✔ مدیریت رسانههای واکنشگرا (Media Queries) با ابزارهای پیشرفته Sass
✔ ایجاد و بهینهسازی تصاویر Sprite با ابزار eyeglass-spriting
✔ ساخت استایلهای جدید برای یک بخش کامل از سایت در فقط ۱۵ دقیقه!
با تغییر نحوه نوشتن CSS به Sass، میتوان عملکرد بهتری در مدیریت استایلهای پروژه داشت. علاوه بر این، تبدیل یک سایت قدیمی به Sass یک روش عالی برای یادگیری این فناوری و درک نحوه کامپایل شدن آن به CSS است.
🔹 در این دوره آموزشی، شما یاد خواهید گرفت:
✔ چرا libSass گزینه بهتری نسبت به Ruby Sass است؟
✔ راهاندازی محیط توسعه Sass با Node.js و Grunt
✔ تبدیل CSS معمولی به SCSS و بهینهسازی آن
✔ تعریف متغیرها و میکسینهای ضروری برای سادهسازی کدها
✔ مدیریت رسانههای واکنشگرا (Media Queries) با ابزارهای پیشرفته Sass
✔ ایجاد و بهینهسازی تصاویر Sprite با ابزار eyeglass-spriting
✔ ساخت استایلهای جدید برای یک بخش کامل از سایت در فقط ۱۵ دقیقه!
مهارت ها
SassCSSWeb StandardsWeb DesignFront-End Web DevelopmentWeb DevelopmentOpen SourceDeep Dive (X:Y)
سرفصل ها
0. مقدمه
- 01 - خوش آمدید
- 02 - آنچه باید بدانید
- 03 - استفاده از فایلهای تمرین
- 04 - استفاده از چالش ها
1. شروع به کار
- 05 - محیط خود را تنظیم کنید
- 06 - بین Ruby Sass یا libSass تصمیم بگیرید
- 07 - Node.js را نصب یا ارتقا دهید
- 08 - Grunt-Sass را نصب کنید
- 09 - Grunt-Sass را پیکربندی کنید
- 10 - با Grunt Watch سرعت توسعه را افزایش دهید
- 11 - CSS را به SCSS تبدیل کنید
- 12 - CSS ایجاد شده را اشکال زدایی کنید
2. ایجاد متغیرهای اصلی و ترکیبی
- 13 - ایجاد متغیرهای رنگی
- 14 - از متغیرهای رنگی استفاده کنید
- 15 - انتزاع واحدهای چیدمان به متغیرها
- 16 - انتزاع مقادیر فونت به متغیرها
- 17 - انتزاع مقادیر z-index به متغیرها
- 18 - csscss را نصب کنید
- 19 - ترکیباتی که ارزش خلق کردن دارند
- 20 - میکسهای پیشرفته ایجاد کنید
- 21 - میکسین پیشرفته ما را اعمال کنید
- 22 - نقاط شکست کوئری رسانه را با include-media مدیریت کنید
3. ابزار مفید Sass
- 23 - از کتابخانه mixin استفاده کنید
- 24 - پیشوندهای مرورگر را با Autoprefixer مدیریت کنید
- 25 - برنامههای افزودنی node-sass را با Eyeglass مدیریت کنید
- 26 - eyeglass-spriting را برای اسپرایتهای تصویر پیکربندی کنید
- 27 - با عینک اسپریت کردن تصاویر اسپریت ایجاد کنید
- 28 - CSS eyeglass-spriting را در وب سایت ما ادغام کنید
4. استفاده از آنچه آموخته ایم
- 29 - چالش - با عینک و شامل مدیا، Sprites با DPI بالا ایجاد کنید
- 30 - راه حل - با عینک و شامل مدیا اسپرایتهای با DPI بالا ایجاد کنید
- 31 - چالش - با متغیرها، میکسها و ابزارهای اسپرایت، سبکهای جدیدی اضافه کنید
- 32 - راه حل - با متغیرها، میکسها و ابزارهای اسپرایت، سبکهای جدید اضافه کنید
رفتن بیشتر
- 33 - مراحل بعدی