00:00 / 00:00
1.8x
1.4x
1.0x
0.7x
HD SD
HD
SD
ثبت‌نام رایگان
  • دسترسی به تمام جلسات دوره
  • دسترسی به تمام جلسات دوره
  • اضافه شدن دوره به پروفایل
00:00 / 00:00
1.8x
1.4x
1.0x
0.7x
HD SD
HD
SD

آموزش رایگان Sass

دوره‌های رایگان
11 جلسه
93٪ (76 رای)

هدف از دوره آموزش Sass پروژه محور چیست‎؟

 Sass یک زبان سبک است که در ابتدا توسط Hampton Catlin طراحی و توسط ناتالی ویزنباوم ساخته شده و به عبارتی به اجرا درآمده است.

SASS یا Syntactically Awesome Style Sheets یک پیش‌پردازنده برای CSS است اما جایگزین CSS نمی‌­باشد و فقط روشی برای کوتاه‌­ترنویسی است. به بیانی استفاده از Sass موجب کاهش تکرار CSS می‌شود و صرفه‌جویی بسیار زیادی در زمان می‌کند. Sass به خوبی می‌تواند سبک­‌های بسیار بزرگ و سنگین و متفاوت ساختار سند را توصیف کند و به زبان اصلی قدرت و ظرافت می­‌بخشد و کمک می‌­کند تا با­ر­ها و بارها به آسانی بتوانید از یک کد استفاده کنید. SASS اضافه کردن متغیرها، قوانین توافقی، mixins، واردات درون‌خطی inline imports ، وراثت inheritance و غیره را به نحو کاملا سازگار با CSS برای شما تسهیل می­‌کند.

ویژگی‌های Sass چیست؟

  • نسبت به CSS پایدارتر، زیباتر و قدرتمندتر است.
  • بر پایه‌ی جاوااسکریپت است و از CSS پشتیبانی می‌­کند.
  • Syntax خود را دارد و در CSS خوانده می‌­شود و قابل ترکیب با CSS است.
  • پیش‌پردازنده متن باز دارد که به CSS تفسیر می‌­شود.
  • از توسعه زبان متغیرها variables ، nesting و mixins پشتیبانی می‌­کند.
  • توابع مفید بسیاری برای تغییر رنگ و مقادیر دیگر را در اختیار شما قرار می‌­دهد.
  • ویژگی‌های بسیاری مانند دستورالعمل‌­های کنترل بر کتابخانه‌­ها را فراهم می‌­کند.
  • امکان ایجاد خروجی well-formatted و سفارشی را دارد.

دوره آموزش Sass پروژه محور مناسب چه کسانی است؟

این دوره آموزشی مناسب همه افراد علاقه‌­مند و متخصصانی است­ که علاقه‌­مند به یادگیری Sass هستند. افرادی که می‌خواهند به یاری Sass وب سایت‌ها و وبلاگ‌­های شخصی یا غیرشخصی خود را جذاب‌­تر و کارآمدتر کنند. این دوره برای طراحان وب و برنامه‌­نویسان رابط کاربری است که می‌خواهند سطح طراحی‌های خود را ارتقاء دهند و با ابزار‌های حرفه‌ای، پروژه‌های بسیار حرفه‌­ای انجام دهند.

دوره آموزش Sass پروژه محور در چند جلسه تدریس می­‌شود؟

این دوره شامل 6 جلسه آموزش ویدیویی است که جمعا حدود 150 دقیقه آموزش در اختیار شما عزیزان به صورت کاملا رایگان و همراه با فایل‌­های تمرینی و ویدئو قرار داده خواهد شد.
 

سرفصل‌های دوره آموزش رایگان Sass

آشنایی با Sass
01:06 ساعت
01:06
Combined Shape Created with Sketch. 6 جلسه
نمایش جلسات فصل  

در فصل اول پس از آموزش نحوه نصب node-sass و koala به بررسی متغیرها و Partials پرداخته شده است. هم‌چنین در این فصل به مباحث: Nesting and Structuring، Inheritance و Function and Mixin مورد بررسی قرار گرفته است. 

نصب node-sass
"14:25
نصب Koala
"06:07
متغیر‌ها و Partials
"11:14
Nesting and Structuring
"10:22
Inheritance
"06:59
Function and Mixin
"17:36
پروژه
01:23 ساعت
01:23
Combined Shape Created with Sketch. 5 جلسه
نمایش جلسات فصل  

در فصل دوم پس از معرفی و آموزش نحوه ایجاد Navbar و نحوه ایجاد Header به بررسی دیگر بخش‌های پروژه مانند فوتر پرداخته شده است.

معرفی و ایجاد Navbar
"22:37
ایجاد Header
"15:59
ایجاد بخش اول و دوم
"09:49
ایجاد بخش سوم و فوتر
"15:01
پروژه Responsive
"20:08
استاد دوره
علی شیخ علی شیخ

علی شیخ در سال ۱۳۹۴ در رشته مهندسی کامپیوتر فارغ‌التحصیل شد و به عنوان برنامه‌نویس وب در شرکت معدنی و صنعتی چادرملو شروع به کار کرد. تخصص اصلی ایشان در زبان‌های جاوا اسکریپت و php است. وی به دلیل این که به آموزش علاقه زیادی داشت، تصمیم به راه‌اندازی وب‌سایتی در این زمینه به نام وب پروگ گرفت و اکنون از سال 1398 تاکنون توانسته‌است سهم کوچکی در آموزش به افراد علاقه‌مند به برنامه‌نویسی را داشته باشد.

درباره برگزارکننده
وب ‌پروگ وب ‌پروگ (اطلاعات بیشتر)

پیش‌نیاز‌های دوره آموزش رایگان Sass

آموزش HTML و CSS
اطلاعات بیشتر

نظرات  (3 نظر)

کاربر مکتب‌خونه
20:12 - 1401/06/26
کاربر‌ سایت
استاد شیخ کیفیت کارتون خیلی عالیه
مصطفی
17:07 - 1401/06/01
کاربر‌ سایت
سلام خیلی دوره خوبی بود روش تدریستون خیلی خوبه منکه از دوره خوشم اومد ممنون از دوره های رایگانی که میزارین البته که اگه بچه ها بخوان بهتر با مطالب اشنا بشن باید دوره های پولی ایشون رو هم بگیرن مخصوصا بوت استرپ در دنیای واقعی
مهدی
14:15 - 1401/03/31
کاربر‌ سایت
با عرض سلام و وقت بخیر خدمت استاد عزیز خیلی خیلی ممنونم بابت این دوره جامع و عالی sass ممنونم که همه چیز را کامل توضیح دادید دوره ای واقعا کامل بود

سوالات پرتکرار

آیا ممکن است که درسی ناقص ضبط شده باشد؟
ما همواره تلاش کرده­‌ایم که دروس را به طور کامل ضبط نماییم و در اختیار شما دوستان قرار دهیم. اما گاهی برخی ناهماهنگی ها سبب می شود که یک یا تعدادی از جلسات یک درس ضبط نشود. توضیح این گونه نواقص در توضیح درس­ ها آمده است.
اگر لینک دانلود یا پخش ویدئو مشکل داشت چه باید کرد؟
در صورتی که با هر گونه مشکلی رو به رو شدید می توانید از طریق صفحه ارتباط با ما به ما اطلاع دهید تا ما سریعا مشکل را پیگیری و برطرف نماییم.
آیا امکان دریافت فیلم های یک درس به صورت سی دی یا دی وی دی وجود دارد؟
در حال حاضر امکان ارسال دروس به صورت سی دی یا دی وی دی وجود ندارد.

اطلاعات بیشتر

Sass مخفف عبارت Systematically Awesome Style Sheets است. این ابزار یک پیش پردازنده CSS است. در واقع می‌توان گفت که Sass شکل توسعه‌یافته CSS بوده که برای افزودن قدرت و ظرافت به آن استفاده می‌شود.

Sass پایدارتر و قدرتمندتر از CSS است که قطعه کدها را به‌طور تمیز و ساختاری توصیف می‌کند. در دوره آموزش رایگان Sass متقاضیان با جنبه‌های مختلف این ابزار قدرتمند آشنا خواهند شد و قادر خواهند بود که آن را در پروژه‌های شخصی و تجاری خود به کار ببرند. قبل از این که به معرفی دوره آموزش رایگان Sass بپردازیم ابتدا اجازه دهید که با Sass، ویژگی‌ها و مزایا و معایب آن آشنا شویم.

Sass چیست؟

Sass شکل کوتاهی از CSS و در واقع فرمت توسعه‌یافته آن است. Sass یک پیش پردازنده CSS است. این ابزار به‌طور کامل با هر نسخه از CSS سازگار است. Sass تکرار کدهای CSS را کاهش می‌دهد و درنتیجه در زمان صرفه‌جویی می‌کند. این ابزار توسط Hampton Catlin طراحی و توسط Natalie Weizenbaum در سال 2006 توسعه یافت. Sass برای دانلود و استفاده به‌صورت رایگان در اختیار کاربران قرار داده‌شده است.

Sass (Syntactically Awesome Style Sheet) به‌عنوان یک پیش پردازشگر CSS به‌طور کامل با هر نسخه از CSS سازگار است. می‌توان گفت که Sass یک زبان برنامه نویسی (مانند زبان برنامه نویسی JS) است که در مرورگر به CSS کامپایل می‌شود. این زبان مزایای بیشتری نسبت به زبان استایل دهی یعنی CSS معمولی ارائه می‌دهد و نحوه نوشتن سبک‌های CSS را بهبود می‌بخشد. از آنجایی که مرورگرها قادر به خواندن یک فایل SASS نیستند، بنابراین، ما باید از یک کامپایلر sass استفاده کنیم که فایل آن را به یک فایل CSS معمولی تبدیل می‌کند. همچنین این زبان به کاهش طول کلی کد با کات کردن یا دور انداختن کدهای CSS کمک می‌کند و درنتیجه باعث صرفه‌جویی در زمان می‌شود. در دوره آموزش رایگان Sass قرار است که با جنبه‌های مختلف این زبان و نحوه کار با آن آشنا خواهیم شد.

تاریخچه Sass

Sass در ابتدا توسط Hampton Catlin طراحی و توسط Natalie Weizenbaum در سال 2006 توسعه یافت. پس از توسعه اولیه، Natalie Weizenbaum و Chris Eppstein به ارتقای نسخه اولیه خود ادامه دادند و Sass را به SassScript، یک زبان اسکریپت ساده که در فایل‌های Sass استفاده می‌شود، گسترش دادند.

ویژگی‌های Sass

هرچند در دوره آموزش رایگان SASS با بیشتر جنبه‌های این زبان آشنا خواهیم شد اما به‌صورت کلی می‌توان گفت که SASS دارای ویژگی‌های زیر است:

  • SASS با CSS سازگار است (به‌طور کامل با نسخه های CSS سازگار است).
  • این برنامه از افزونه‌های مختلف زبان‌ها مانند متغیرها، تودرتو و میکسین ها پشتیبانی می‌کند.
  • این زبان دارای خروجی قابلیت تنظیم است.
  • تعدادی از عملکردهای مفید را برای دستکاری رنگ‌ها و مقادیر دیگر و غیره تسهیل می‌کند.
  • این زبان به مرورگر وب کمک می‌کند تا کدهای Sass را در CSS استاندارد ساده تشخیص دهد.
  • این زبان از CSS که محبوبترین زبان استایل دهی است، پایدارتر و قدرتمندتر است.
  • این زبان بر اساس جاوا اسکریپت و ابر مجموعه CSS است.
  • این زبان سینتکس خاص خود را دارد و به CSS قابل خواندن کامپایل می‌شود.
  • این یک پیش پردازنده منبع باز است که به CSS تفسیر می‌شود.
  • از پسوندهای زبانی مانند متغیرها، تودرتو و میکسین ها پشتیبانی می‌کند.
  • بسیاری از توابع مفید برای دستکاری رنگ‌ها و مقادیر دیگر ارائه می‌دهد.
  • بسیاری از ویژگی‌های پیشرفته مانند دستورالعمل‌های کنترل برای کتابخانه‌ها را فراهم می‌کند.
  • این زبان خروجی با فرمت خوب و قابل تنظیم ارائه می‌دهد.

با استفاده از ابزار خط فرمان sass-convert در فایل، می‌توان یک سینتکس را به سینتکس دیگر تبدیل کرد. SASS را می‌توان به 5 روش پیاده‌سازی کرد:

  • با استفاده از عبارت import
  • با استفاده از گره و npm
  • با استفاده از ابزار Command-line
  • با استفاده از ماژول Standalone-Ruby
  • با استفاده از نصب افزونه

در دوره آموزش رایگان SASS شیوه نصب و استفاده از این زبان آموزش داده‌شده است.

چرا از Sass باید استفاده کرد؟

دلایل زیادی برای استفاده از Sass وجود دارد که از مهم‌ترین آن‌ها می‌توان:

  • Sass یک زبان پیش پردازش است و سینتکس خاص خود را برای CSS دارد.
  • ساختار برنامه نویسی آن آسان، کوتاه و تمیز است.
  • این زبان دارای برخی از ویژگی‌هایی است که برای ایجاد شیت‌های سبک و عالی استفاده می‌شود و نوشتن کد را کارآمدتر و نگهداری آسان‌تر را تسهیل می‌کند.
  • این زبان شامل تمام ویژگی‌های CSS به همراه برخی از ویژگی‌های پیشرفته است.
  • Sass روش‌های قابلیت استفاده مجدد، عبارات منطقی و برخی از توابع داخلی مانند دستکاری رنگ و... را نسبت به CSS تسهیل می‌کند.
  • این زبان به شما کمک می‌کند تا پروژه‌های واکنشگرای خود را سازمان‌دهی کنید.
  • لازم نیست کدهای CSS را بارها و بارها در پروژه خود تکرار کنید.
  • در دوره آموزش رایگان Sass با ویژگی‌ها و کاربردهای مختلف و بیشتر این زبان آشنا خواهیم شد.

مزایا و معایب Sass

در این بخش با برخی از مزایا و معایب Sass آشنا خواهیم شد:

مزایای:

  • Sass به شما کمک می‌کند تا CSS تمیز، آسان و با حجم کمتری را برای یک پروژه بنویسید.
  • Sass پایدارتر، قدرتمندتر و انعطاف‌پذیرتر از CSS است؛ بنابراین، برای طراحان و توسعه‌دهندگان این امکان را فراهم می‌کند که کارآمدتر و سریع‌تر کار کنند.
  • با تمام نسخه‌های CSS سازگار است؛ بنابراین، می‌توانید از هر کتابخانه CSS موجود استفاده کنید.

معایب:

  • توسعه‌دهنده باید زمان کافی برای یادگیری ویژگی‌های جدید موجود در این پیش پردازنده قبل از استفاده از آن داشته باشد.
  • دوره آموزش رایگان Sass نقطه‌ شروع خوبی برای آغاز است.
  • استفاده از Sass باعث عدم استفاده از ویژگی بازرسی عنصر داخلی مرورگر می‌شود.

Sass در مقابل SCSS

Sass دو نحو (سینتکس) مجزا ارائه می‌دهد:

  • SCSS
  • Sass

هر دو شبیه هستند و کار مشابهی را انجام می‌دهند، اما به سبک متفاوتی نوشته‌شده‌اند. SCSS جدیدترین است و به‌صورت بهتر از Sass در نظر گرفته می‌شود.

مزیت Sass:

سینتکس Sass کاملاً با CSS متفاوت است اما تایپ آن کوتاه‌تر و راحت‌تر است. شما نیازی به تایپ نقطه ویرگول یا پرانتز ندارید. همچنین این نحو استانداردهای کد نویسی تمیزی را ارائه می‌دهد.

مزیت SCSS:

کاملاً با CSS سازگار است. شما می‌توانید نام یک فایل CSS را به پسوند.scss تغییر دهید و کد همچنان کار خواهد کرد. از طرفی به دلیل اینکه SCSS از سینتکس CSS پیروی می‌کند، یادگیری و کار آن را بسیار آسان می‌کند.

اهمیت Sass

اهمیت Sass را می‌توان با این واقعیت برجسته کرد که مدیریت صفحات سبک sice به دلیل اندازه و پیچیدگی آن‌ها دشوار است، بنابراین، Sass به شما امکان می‌دهد تا پروژه و طرح‌های خود را سریع‌تر ساختار دهید. همچنین Sass امکان استفاده از متغیرها، میکسین، وراثت، ایمپورت و اکسپورت، توابع و غیره را فراهم می‌کند.

Sass چگونه کار می‌کند

Sass از یک پیش پردازشگر برای تبدیل کد به کد CSS قابل خواندن استفاده می‌کند زیرا کد Sass توسط مرورگر وب قابل درک نیست. این روش تبدیل کد Sass به CSS به‌عنوان transpiling نامیده می‌شود و پیش پردازنده ای که این عملکرد را انجام می‌دهد transpiler نام دارد.

تفاوت بوت استرپ و Sass

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

×

ثبت نظر

به این دوره از ۱ تا ۵ چه امتیازی می‌دهید؟

آشنایی با Sass
01:06 ساعت
01:06
Combined Shape Created with Sketch. 6 جلسه
نمایش جلسات فصل  

در فصل اول پس از آموزش نحوه نصب node-sass و koala به بررسی متغیرها و Partials پرداخته شده است. هم‌چنین در این فصل به مباحث: Nesting and Structuring، Inheritance و Function and Mixin مورد بررسی قرار گرفته است. 

نصب node-sass
"14:25
نصب Koala
"06:07
متغیر‌ها و Partials
"11:14
Nesting and Structuring
"10:22
Inheritance
"06:59
Function and Mixin
"17:36
پروژه
01:23 ساعت
01:23
Combined Shape Created with Sketch. 5 جلسه
نمایش جلسات فصل  

در فصل دوم پس از معرفی و آموزش نحوه ایجاد Navbar و نحوه ایجاد Header به بررسی دیگر بخش‌های پروژه مانند فوتر پرداخته شده است.

معرفی و ایجاد Navbar
"22:37
ایجاد Header
"15:59
ایجاد بخش اول و دوم
"09:49
ایجاد بخش سوم و فوتر
"15:01
پروژه Responsive
"20:08