سامانه جامع معاونت فرهنگی اجتماعی

انجمن علمی دانشجویی مهندسی کامپیوتر گرایش فناوری اطلاعات

دوره آموزشی less and sass

سارا حسين جاني

نوع درخواست:	کارگاه و کلاس آموزشی (کارگاه (ورکشاپ) علمی و آموزشی )
سطح برگزاری:	کشوری
مدرس:	امیررضا داعی
تاریخ برگزاری:	پنجشنبه, 09 بهمن 1399
مکان برگزاری:	آنلاین در پلتفرم اسکای روم
مدت زمان برنامه(دقیقه):	1800
تعداد افراد شرکت کننده:	12

انجمن علمی دانشجویی مهندسی کامپیوتر گرایش فناوري اطلاعات معاونت فرهنگی و اجتماعی دانشگاه الزهرا(س)، " دوره آموزشی less and sass" را با هدف آموزش این مبحث به علاقمندان با تدریس آقای امیررضا داعی مدرس رسمی کنسرسیوم جهانی وب از روز جمعه 9 بهمن ماه الی 28 اسفند ماه 1399 با حضور 12 نفر از علاقمندان به صورت آنلاین در فضای اسکای روم برگزار کرد. توضیحات: اگر یک توسعه‌دهنده وب باشید، حتماً حین کار با CSS متوجه شده‌اید که بسیاری از استایل‌ها مدام تکرار می‌شوند. مشکل اصلی اینجاست که برای تغییر دادن این استایل‌های تکراری باید خطوط زیادی را اصلاح کنیم. امروز به معرفی یک زبان رفتیم تا راه‌حلی برای این مشکلات در CSS بیان کنیم. عبارت LESS مخفف Leaner Style Sheets و یک زبان پیش‌پردازنده برای CSS است. این تکنولوژی به زبان JavaScript نوشته شده است اما برای کارکردن با آن نیازی به دانستن جاوا اسکریپت ندارید. و اما Less قادر است قابلیت‌های مختلفی را به CSS اضافه کند تا بتوانیم با CSS‌ مثل یک زبان برنامه‌نویسی سمت سرور برخورد کنیم. برای مثال در CSS نمی‌توانیم از توابع یا متغیرها استفاده کنیم اما LESS این قابلیت‌ها را ممکن می‌سازد. عبارت SASS مخفف Syntactically Awesome Style Sheets و یک زبان پیش‌پردازنده برای تولید کد Css است. این زبان به هیچ عنوان جایگزین Css محسوب نمی‌شود و می‌توان آن را روشی برای توسعه و مدیریت کدهای Cssدانست.SASS یک پیش‌پردازنده (Preproccesor) برای زبان CSS است. در واقع Sass آمده است تا محدودیت‌ها و ضعف‌های زبان CSS را جبران کند و با اضافه کردن ویژگی‌های جالبی به آن، نوشتن کد‌های CSS را راحت‌تر و سریع‌تر سازد. Sass امکان استفاده از متغیرها (Variables)، دستورات تودرتو (Nesting)، وارد کردن قطعه کدها (Partial Imports)، گروه‌بندی کدها (Mixins)و وراثت (Inheritance) را در کدهای Css را فراهم می‌کند. کدهای SASS در نهایت کامپایل و به Css تبدیل می‌شوند. دوره آموزشی less and sass با هدف آماده‌سازی دانشجویان برای ورود به پروژه‌های حرفه‌ای و بزرگ نرم‌افزاری تدوین شده است که به مدت ۳۰ ساعت با تدریس استاد امیررضا داعی مدرس رسمی کنسرسیوم جهانی وب توسط انجمن علمی دانشجویی مهندسی کامپیوتر گرایش فناوری اطلاعات دانشگاه الزهرا (س) برگزار شد. روزمه مختصر : مدرس رسمی کنسرسیوم جهانی وب(CIW) موسس و مدیرعامل شرکت فناوران پیشتاز شرق و بنیان گذار ardaei.ir مرجع تخصصی آموزش طراحی و توسعه وبسایت مدرس دانشگاه و عضو هیئت علمی مجتمع فنی تهران با ۱۵ سال سابقه سرفصل ها مفاهیم پیش پردازنده های CSS بررسی دلایل و مزیت استفاده از پیش پردازنده های CSS بررسی انواع ساختار نوشتاری در SASS بررسی تفاوت ساختار SASS و SCSS بررسی مزایا و معایب SASS وSCSS با یکدیگر توضیح نحوه کدنویسی تحت CSS ,SASS و SCSS در قالب چند مثال کاربردی برای مقایسه هر کدام بایکدیگر و دربهتر از دلایل استفاده از پیش پردازنده SASS نصب نرم افزار های مورد نیاز فصل دوم – پیش نیازها بررسی پیش نیازها قبل از استفاده از SASS نصب RUBY دانلود و نحوه نصب SASS توسط Package Manager gem و خط فرمان Command Prompt ویندوز بررسی انواع روش های کامپایل فایل های SASS توسط ابزاهای پیشنهاد شده توسط وب سایت رسمی SASS بررسی روش های بهینه تر بدون وابستگی به ابزارهای جانبی برای کامپایل فایل های SASS کامپایل فایل های (Watch) SASS توسط نرم افزار PhpStorm کامپایل فایل های SASS (Watch) توسط Command Prompt ویندوز فصل سوم – Gulp Task Runner بررسی مفهوم Task Runner ها و دلایل استفاده از آنها مروری بر Task Runner Gulp بررسی فایل json نحوه تعریف یک Task در Gulp بررسی تعدادی از دستورات کاربردی Gulp نحوه آدرس دهی فایل های مورد نظر پروژه برای اعمال تغییرات از جمله Update در Gulp ایجاد Watch Task برای کامپایل فایل های SASS توسط Gulp ایجاد Browser Sync Task برای Refresh خودکار مرورگر برای نمایش تغییرات اعمال شده در پروژه توسط Gulp پوشه بندی فایل های مورد نیاز فصل چهارم – متغییر ها (Variables) بررسی متغیرها در SASS نحوه ایجاد متغییر ها در SASS دلایل استفاده از متغیرها در SASS نحوه کامنت گذاری در SASS نحوه ایجاد متغییر های تو در تو فصل پنجم – بخش بندی (Partials) بررسی مبحث Partials نحوه ایجاد فایل های خارجی نحوه استفاده از جندین فایل خارجی در یک فایل بررسی مبحث Import آدرس دهیurl و Http فصل ششم – تو در تو نویسی ( Nesting ) مفهوم Nesting ها در SASS و دلایل استفاده از آنها نحوه تو در تو نویسی توسط Nesting فصل هفتم – ( Mixins ) مفهوم Mixin ها در SASS و دلایل استفاده از آنها نحوه ارسال پارامتر به یک Mixin نحوه ارسال محتوا به یک Mixin فصل هشتم – (Media Query) مدیا کوئری ها و بررسی مبحث طراحی واکنشگرا در SASS نحوه ایجاد و استفاده از Mixin ها در مدیا کوئری ها نحوه ارسال پارامتر در مدیا کوئری ها نحوه اجرای دستورات متفاوت در مدیا کوئری ها متفاوت برای ابعاد مختلف سند در مرورگرها نحوه استفاده از مبحث Nesting در مدیا کوئری ها فصل نهم- عملگرهای محاسباتی و توابع (Operators & Functions) بررسی عملگرهای ریاضی برای انجام محاسبات بروی اندازه ها بررسی نحوه عملکرد توابع رنگ ها ایجاد و تعریف توابع دلخواه برای انجام عملیات محاسباتی فصل دهم - وراثت (Inheritance) بررسی مبحث Extend و ارث بری در SASS جلوگیری از خطا در کدها در صورت عدم ارث بری یک عنصر Extend در برابر Mixin ! کدامیک بهتر است؟ فصل یازدهم - conditional statement ( دستوارت شرطی ) بررسی دستوارت شرطی (if & else) , نحوه و زمان استفاده از آنها کنترل رفتار سند و صفحات HTML توسط دستورات شرطی (مانند تغییر رنگ پس زمینه در حالات متفاوت) مباحث تکمیلی در مورد Mixin ها و دستوارت شرطی فصل دوازدهم - حلقه ها و دستوارت تکرار بررسی دستور For , نحوه و زمان استفاده از آنها بررسی دستور Each , نحوه و زمان استفاده از آنها بررسی دستور While , نحوه و زمان استفاده از آنها نحوه کنترل و جلوگیری از کدنویسی تکراری و مشابه, مثل کلاس های شبکه بندی فریم ورک هایی مثل بوت استرپ,فاندیشن و ... توسط حلقه ها در SASS ایجاد یک سیستم شبکه بندی (Grid System) همانند فریم ورک بوت استرپ 🔹معرفی less ، پیشنیاز ها و آماده سازی محیط مفهوم ، مزیت ها و دلایل استفاده از preprocessor معرفی less و مزیت استفاده از آن دانلود less معرفی نرم افزارهای کامپایلر فایل های less در ویندوز و تبدیل به css نحوه کامپایل فایل less توسط command prompt اتصال فایل less به سند و نحوه ی import کردن چندین فایل جداگانه ی LESS 🔹شروع کار با less ، متغیر ها ، پارامتر ها و mixin ها نحوه کامنت گذاری متغیرها و نحوه تعریف آنها نحوه اعمال مقادیر متغیرهای مشابه در سند بررسی ارورهای رایج بررسی namespace ها در mixin بررزسی mixin ها 🔹بررسی nesting در less بررسی nesting و ساختار آن استفاده از nesting برای single selector ها استفاده از nesting برای multiple selector ها نحوه ایجاد pseudo class بررسی extend pseudo class 🔹بررسی توابع و عملگرهای محاسباتی در less بررسی ساختار ایجاد توابع برای رنگ های موجود در سند بررسی توابع به عنوان مثال hue - lightness-saturation-lighten-saturate-و.... نحوه استفاده از عملگرهای ریاضی بررسی توابع محاسباتی برای اعمال تغییرات در مقادیر عددی خصوصیات عناصر

لینک های مفید

معاونت فرهنگی و اجتماعی دانشگاه الزهرا(س)