در این فرادرس قصد داریم زبان اسکریپت نویسی Sass را به شما معرفی کنیم. با استفاده از این زبان اسکریپت نویسی شما می توانید در بین کدهای CSS متغیر تعریف کنید، آن ها را به صورت تو در تو بنویسید و حتی برای کدهای پر کاربرد خود، تابع تعریف کنید و همچنین کدهای CSS خود را با استفاده از منطق، تحت کنترل خود بگیرید و از مفاهیم پرکاربرد DRY و وراثت در آن ها استفاده کنید. اگر قصد دارید یک طراح حرفه ای باشید و پروژه های بزرگ با کدهای بسیار زیاد را به راحتی استایل دهی کنید استفاده از یک زبان اسکریپت نویسی مانند Sass اجتناب ناپذیر است.
آموزش مقدماتی پیش پردازنده Sass برای توسعه CSS
مهدی یوسفی دانشجوی کارشناسی فناوری اطلاعات (IT) در دانشگاه سمنان هستند. ایشان از 14 سالگی فعالیت حرفهای خود را در زمینه برنامه‌نویسی حرفهای وب با زبان PHP شروع کرده‌اند و در حال حاضر به زبان‌هایی همچون PHP، سی‌پلاس‌پلاس (++C) و جاوا اسکریپت (JavaScript) مسلط هستند.
- ۱۰۰ درصد مبلغ پرداختی در حساب کاربری شما شارژ می‌شود.
- و یا ۷۰ درصد مبلغ پرداختی به حساب بانکی شما بازگشت داده می‌شود. (توضیحات بیشتر +)
چکیده آموزش
توضیحات تکمیلی
نسخه CSS3 در سال ۲۰۱۴ با امکانات فراوان در زمینه های مختلفی مانند انیمیشن منتشر شد و پس از آن طراحی صفحات وب، رشد چشمگیری را تجربه کردند. همگام با این رشد چشمگیر، استایل دهی با CSS مستلزم نوشتن خطوط زیادی از کد شد و این روند تا آنجایی ادامه پیدا کرد که نسخه ۴ فریم ورک محبوب و نام آشنای بوت استرپ (Bootstrap) شامل حدودا ۱۰ هزار خط کد CSS است.
مطمئنا کنترل و تسلط روی این حجم از کد کار دشواری است. تصور کنید شما صفحه ای را طراحی کرده اید و از ترکیب رنگی سبز برای این صفحات استفاده کرده اید و حال قصد تغییر این ترکیب رنگی به آبی را دارید. به نظرتان چقدر زمان نیاز است که ترکیب رنگی جدید در ۱۰ هزار خط کد CSS بدون هیچ خطایی اعمال شود؟ یا ۱۰ درصد تیره کردن رنگ فعلی سایت چقدر حوصله نیاز دارد؟
تا قبل از به وجود آمدن Sass پاسخ به سوالات بالا کمّی سخت بود. در این فرادرس قصد داریم زبان اسکریپت نویسی Sass را به شما معرفی کنیم. با استفاده از این زبان اسکریپت نویسی شما می توانید در بین کدهای CSS متغیر تعریف کنید، آن ها را به صورت تو در تو بنویسید و حتی برای کدهای پر کاربرد خود، تابع تعریف کنید و همچنین کدهای CSS خود را با استفاده از منطق، تحت کنترل خود بگیرید و از مفاهیم پرکاربرد DRY و وراثت در آن ها استفاده کنید.
اگر قصد دارید یک طراح حرفه ای باشید و پروژه های بزرگ با کدهای بسیار زیاد را به راحتی استایل دهی کنید استفاده از یک زبان اسکریپت نویسی مانند Sass اجتناب ناپذیر است.
فهرست سرفصل ها و رئوس مطالب مطرح شده در این مجموعه آموزشی، در ادامه آمده است:
- درس یکم: آشنایی با زبان اسکریپت نویسی Sass
- مقدمه
- مفهوم پیش پردازنده
- تفاوت Sass و Scss
- درس دوم: نصب و اجرا
- نصب در ویندوز (Windows)
- نصب در لینوکس (Linux)
- ایجاد اولین پروژه
- تنظیم Watch
- درس سوم: دستورهای Sass
- کامنت ها
- متغیرها
- انواع داده
- عملگرهای ریاضیاتی
- عملگرهای تساوی
- عملگرهای مقایسه
- عملگرهای منطقی
- عملگر رنگ ها
- عملگر & (Ampersand)
- درج متغیر در رشته ها
- درس چهارم: Partials & Imports
- Partials
- Imports
- درس پنجم: Mixin و وراثت
- معرفی Mixin
- Mixin با پارامتر ورودی
- وراثت
- Placeholder Selectors
- تفاوت Mixin با Extend
- درس ششم: دستورهای تو در تو
- دستورهای تو در تو
- ویژگی های تو در تو
- درس هفتم: مباحث تکمیلی
- لیست ها
- تابع nth
- Maps
- At - root
- درس هشتم: توابع
- معرفی توابع
- توابع از پیش تعریف شده
- تعریف تابع
- استفاده از توابع
- درس نهم: شرط ها و حلقه ها
- if و else if, else
- حلقه for
- حلقه each
- حلقه while
- درس دهم: فریم ورک ها
- Bourbon
- Bourbon Neat
- Bourbon – Bitters
- Compass
- درس یازدهم: ابزارها و تکنیک ها
- Scout - App
- تبدیل CSS به Sass
مفید برای رشته های
- مهندسی کامپیوتر
آنچه در این آموزش خواهید دید:
نرم افزارهای مرتبط با آموزش
پیش نمایش‌ها
۱.
آشنایی با زبان اسکریپت نویسی Sass
توجه: اگر به خاطر سرعت اینترنت، کیفیت نمایش پایین‌تر از کیفیت HD ویدئو اصلی باشد؛ می‌توانید ویدئو را دانلود و مشاهده کنید (دانلود پیش‌نمایش - حجم: ۵ مگابایت -- (کلیک کنید +))
۲.
نصب و اجرا
توجه: اگر به خاطر سرعت اینترنت، کیفیت نمایش پایین‌تر از کیفیت HD ویدئو اصلی باشد؛ می‌توانید ویدئو را دانلود و مشاهده کنید (دانلود پیش‌نمایش - حجم: ۵ مگابایت -- (کلیک کنید +))
۳.
دستورهای Sass
توجه: اگر به خاطر سرعت اینترنت، کیفیت نمایش پایین‌تر از کیفیت HD ویدئو اصلی باشد؛ می‌توانید ویدئو را دانلود و مشاهده کنید (دانلود پیش‌نمایش - حجم: ۵ مگابایت -- (کلیک کنید +))
۴.
Partials & Imports
توجه: اگر به خاطر سرعت اینترنت، کیفیت نمایش پایین‌تر از کیفیت HD ویدئو اصلی باشد؛ می‌توانید ویدئو را دانلود و مشاهده کنید (دانلود پیش‌نمایش - حجم: ۷ مگابایت -- (کلیک کنید +))
۵.
Mixin و وراثت
مشاهده این پیش‌نمایش، نیازمند عضویت و ورود به سایت
(+) است.
۶.
دستورهای تو در تو
مشاهده این پیش‌نمایش، نیازمند عضویت و ورود به سایت
(+) است.
۷.
مباحث تکمیلی
مشاهده این پیش‌نمایش، نیازمند عضویت و ورود به سایت
(+) است.
۸.
توابع
مشاهده این پیش‌نمایش، نیازمند عضویت و ورود به سایت
(+) است.
۹.
شرط ها و حلقه ها
مشاهده این پیش‌نمایش، نیازمند عضویت و ورود به سایت
(+) است.
۱۰.
فریم ورک ها
مشاهده این پیش‌نمایش، نیازمند عضویت و ورود به سایت
(+) است.
۱۱.
ابزارها و تکنیک ها
مشاهده این پیش‌نمایش، نیازمند عضویت و ورود به سایت
(+) است.
با تهیه این آموزش، می‌توانید به همه بخش‌ها و جلسات آن، دسترسی داشته باشید.
راهنمای سفارش آموزش‌ها
.svg)
در مورد این آموزش یا نحوه تهیه آن سوالی دارید؟
- با شماره تلفن واحد مخاطبین ۵۷۹۱۶۰۰۰ (پیش شماره ۰۲۱) تماس بگیرید. - تمام ساعات اداری
- با ما مکاتبه ایمیلی داشته باشید (این لینک). - میانگین زمان پاسخ دهی: ۳۰ دقیقه
اطلاعات تکمیلی
| نام آموزش | آموزش مقدماتی پیش پردازنده Sass برای توسعه CSS |
|---|---|
| ناشر | فرادرس |
| شناسه اثر | ۸–۱۲۴۵۲–۰۶۹۶۰۳ (ثبت شده در مرکز رسانه‌های دیجیتال وزارت ارشاد) |
| کد آموزش | FVWEB9708 |
| مدت زمان | ۱ ساعت و ۳۹ دقیقه |
| زبان | فارسی |
| نوع آموزش | آموزش ویدئویی (نمایش آنلاین + دانلود) |
| حجم دانلود | ۱۱۲ مگابایت (کیفیت ویدئو HD با فشرده سازی انحصاری فرادرس) |
نظرات
ابوالفضل رضائی
خیلی ممنون آقای یوسفی
عالی بود
اگر میخواهید به sass مسلط شوید حتما این آموزش رو تهیه کنید
فقط ممکنه شما هم مثل بنده اول کار به مشکل بخورید و بعد از نصب ruby installer نتونید در cmd با دستور gem install sass پیشپردازنده sass رو نصب کنید حتی با کمک دستور chcp 1252، برای حل این مشکل نسخه های دیگر ruby installer رو امتحان کنید