تخفیف ویژه همین الان — دوره‌های تخفیف‌دار را ببینید.
روز
:
ساعت
:
دقیقه
:
ثانیه
تخفیف‌های ویژه
دوره آموزشی CSS به Sass: تبدیل یک سایت موجود

دوره آموزشی CSS به Sass: تبدیل یک سایت موجود

2 ساعت 32 دقیقهمتوسط2016-02-12

مدرسین

John Riviello

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
✔ ساخت استایل‌های جدید برای یک بخش کامل از سایت در فقط ۱۵ دقیقه!

مهارت ها

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 - مراحل بعدی

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

درباره ما

لینداکده یک بستر یادگیری پیشرو است که به افراد کمک می کند تا کسب و کار ، نرم افزار ، فناوری و مهارت‌های خلاقانه را برای دستیابی به اهداف شخصی و حرفه ای بیاموزد.

شماره تلفنکانال آپاراتپشتیبانی تلگرامکانال تلگرامپیج اینستاگرام

کلیه‌ی حقوق این سایت متعلق به لینداکده می باشد

قوانین و شرایط|حریم خصوصی

نماد الکترونیک enamad در صورت اتصال با آی‌پی داخل کشور، نمایش داده خواهد شد.
logo-samandehi - لوگو ساماندهی
zarinpal
zibal