دوره جامع آموزش پیش پردازنده Sass

دوره آموزشی Sass

پیش پردازنده Sass یکی از ارکان مهم توسعه وب در این روزها به حساب می آید به همین دلیل این دوره بصورت کامل به آموزش این موضوع می پردازد.

پیشنیازها

  1. آشنایی با مفاهیم اولیه HTML و CSS
  2. مطالب فصل اول تا هفت لیست آموزشی

مواد درسی

موضوع جلسه مدت زمان ویدیو
مقدمه 8 دقیقه
راه اندازی Sass 13 دقیقه
سینتکس‌های Sass 8 دقیقه
ساختار تودرتویی و انتخابگرها 40 دقیقه
متغیرها 29 دقیقه
عملگرها و واحدها 13 دقیقه
کامنت‌ها 5 دقیقه
درج متغیرها در یک رشته 9 دقیقه
دستورهای کنترل جریان 6 دقیقه
حلقه‌ها 16 دقیقه
لیست‌ها و مپ‌ها 33 دقیقه
Extends 11 دقیقه
Placeholders 8 دقیقه
Mixins 32 دقیقه
Functions 21 دقیقه
مدیا کوئری‌ها 20 دقیقه
معماری فایل ها در پروژه‌های Sass 32 دقیقه
معرفی کتابخانه‌ها 12 دقیقه
CSS در مقابل Sass 14 دقیقه
پایان 2 دقیقه

ویدیو نمونه

دانلود دوره

می توانید از لینک زیر اقدام به خرید این دوره کنید:

سوالت رو توی پنل بحث و گفتگو مطرح کن.

24 دیدگاه برای “دوره آموزشی Sass

  1. سلام
    اول تشکر میکنم بابت آموزش های عالیتون که واقعا به من کمک زیادی کرد.
    دوم در مورد لزوم یادگیری sas سوال داشتم
    شما در این ویدئو فقط از مزایای CSS نسبت به sas گفتین من واقعا نمیدونم چه ازومی داره بخام sas یاد بگیرم !!

    1. سلام،
      این ویدیو فقط یکی از بیست قسمت این دوره است.
      دلیل انتخاب این مبحث هم برای دموی این دوره، این هستش که این مبحث برای خیلی ها سواله، “تفاوت متغیرهای Sass و CSS”، من خواستم اون کسانی که نمیخوان این دوره رو خرید کنند هم حداقل یک نکته خاصی رو در مورد CSS یاد بگیرند، و الا از نظر تبلیغاتی دقیقا همین چیزی هستش که شما میگین، طرف میگه خوب پس چرا Sass یاد بگیرم!؟

      و اینکه لزوم یادگیری Sass هم من رو یاد این ضرب و المثل میندازه که میگه: “حلوای تنتنانی تا نخوری ندانی” :)

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

      براتون آرزوی موفقیت میکنم.

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

  2. سلام استاد خسته نباشید:
    سوالم اینه که ایا میشه گفت الان بهترین پیش پردازنده sass هستش؟ این شاید سوال بسیاری باشه

    و اینکه دقیقا تفاوت و احیانا برتری sass نسبت به سایر پیش پردازنده در چیست ممنون میشم اگر کامل توضیح بدید؟

    و بنده دوره فلکس باکس و گرید رو کار کردم و احساس میکنم دیگه لزومی به استفاده از فریموورک هایی مثل بوتس ترپ نباشه، یعنی تمایل ندارم از فریم های استفاده کنم، ایا این تفکر اشتباهه و من اشتباه میکنم یا اینکه این دو ماژول میتونن کاملا جایگزین فریموورک های جور واجور بشن؟؟؟؟؟؟؟

    1. سلام، ممنون از سوالتون

      احتمالا تا چند روز دیگه یک بخش سوالات متداول توی پست ایجاد میشه، و سوالات احتمالی دوستان رو جواب میده، تا اون موقع:

      پیش پردازنده ها اول با هم خیلی متفاوت بودند ولی کم کم ویژگی های خوب هم رو کپی کردن و خیلی شبیه به هم شدند، مخصوصا Stylus و Sass

      نکته اصلی که باعث میشه اصلا شما دنبال بررسی فنی نباشید، این هستش که جامعه ای که دارند از Sass استفاده میکنن اصلا قابل مقایسه نیستن از نظر آماری با بقیه موارد، خب این باعث میشه که شما حتما یادگیری Sass رو توی برنامه تون داشته باشید. این یعنی اگر قراره وارد یک تیم بشید، احتمال خیلی زیاد از Sass استفاده میکنن، این یعنی اکثر فریمورک های معروف دنیا دارند از Sass استفاده میکنن و الا آخر…

      مثلا یک نظرسنجی در سال 2018 نشون میده که 65 درصد از Sass استفاده میکنن، و بقیه پیش پردازنده ها زیر 10 درصد هستن.

      من به شخصه سینتکس Sass رو بیشتر می پسندم. من خودم قبل از Sass با پیش پردازنده Stylus کار میکردم (تقریبا 5 سال پیش).

      در مورد سوال آخرتون هم، به هیچ عنوان این تفکر اشتباه نیست، هر کاری که اون فریمورک ها انجام بدند، شما می تونید انجام بدید، و شما محدود به فریمورک نیستید. در نتیجه جمله باید اینطوری باشه، کارهایی که فریمورک ها انجام میدند یک گوشه ای از کارهایی هستش که شما می تونید انجام بدید :)

      فریمورک ها سه مورد استفاده دارن:

      1. یا افرادی که استفاده میکنن CSS رو به خوبی بلد نیستند و نمی تونن صفحه آرایی کنند. (چون بیشترین دلیل استفاده افراد از فریمورک ها صفحه آرایی هستش، مخصوصا واکنشگرا بودن صفحه.)

      2. طراحی پروژه بر اساس اون فریمورک انجام شده، یعنی طراح بوتسترپ رو نگاه کرده و طراحی کرده، خب من اینجا اگر از این فریمورک استفاده کنم “خیلی” سریع می تونم پروژم رو پیاده سازی کنم.

      3. تیم مجبور میکنه افراد رو برای استفاده از یک فریمورک خاص.

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

      موفق باشید.

      1. ابتدا بابت پاسخ گوییتون ممنونم و توضیحات بسیار کامل بود.
        بنده به شخصه به قدرت بالای فلکس باکس و گرید پی بردم و یک پروژه را در حال انجام هستم که در صورت اتمام خدمتتون ارسال میکنم تا نظرتون را بفرمایید.

        اما به عنوان سوال اخر، بنده در حال یادگیری دیزاین و طراحی سایت هستم و چون قبلا طراح فتوشاپ و ایلوستریتور بودم الان تمام ایده ها رو میخوام به قالب های داینامیک و ریسپانسیو تبدیل کنم و روش هاش رو هم تا حدودی فرا گرفتم و به طراحی و برنامه نویسی سمت کاربر در حال حاضر به چشم یک شغل نگاه میکنم، و با توجه به اینکه تازه سربازیم تموم شده و شرایط مالیم اصلا خوب نیست و از طرفی میخوام شغل ایندم رو انتخاب کنم خواستم ببینم ایا به طراحی و کدنویسی سایت میشه به چشم یک شغل با درامد خوب نگاه کرد، چیزی که فرد ارزشش رو داشته باشه تا بخشی از عمرش رو اختصاص بده؟؟؟ ببخشید که طولانی شد اما جوابش برام مهمه و مدتی ذهنم رو درگیر کرده و چون شما تجربه دارید در این زمینه خوشحال میشم راهنمایی بفرمایید استاد ؟؟؟؟

        1. سول سختیه راستش :) مخصوصا اون قسمتیش که میگید ارزشش رو داره که بخشی از عمرتون رو بزارید.
          از نظر درآمد بسته به توانایی تون میتونه درآمدش خوب باشه. خیلی ها دارند با این شغل زندگیشون رو می چرخونند حتی با سن های بالا. ولی خب آینده نگر کار کنید همیشه و کارتون رو وسعت بدید. یک نکته خوبی هم که داره از معدود حرفه هایی هستش که میشه دورکاری یا مثلا فریلنسری کار کرد.

    2. سلام
      از منوی
      Accessibility> hearing > mono audio
      میتونید کانال صدایی که از گوشی خارج میشه رو combine کنید
      و صدا رو به صورت مونو و تقسیم شده از هر دو اسپیکر گوش کنید

  3. مهندس مجتبی ، یه به قول من سید جان، خیلی دمت گرم، خیلی خسته نباشی ، خیلی ممنونم ازت
    آموزش sass رو که میخواستم بگیرم زده بودی 39 تومن رگ یزدیم زد بالا خخخخ و زورم اومد اول و خواستم ایمیل بدم کد تخفیف بدی بهم، ولی گفتم نه، خلاصه هرجوری بود کنار اومدم و خریدم، همین الان یعنی ساعت 12:54 دقیقه ی شب آخرین ویدیو رو دیدم، واقعا ممنونم ازت اون 39 تومن از شیر مادر حلال ترت، ایشالا هرچی از خدا میخوای بهت بده، ادامه بده یعنی مث چی بگم منتظرم اموزش gulp و react js برامون بذاری ، من اینا حالیم نیست باید بذاری برامون و این بخدا به گردنته مهندس، دینتو ادا کن زکات علمتو بده، خیلی قشنگ توضیح داده بودی یه شوخی هم بکنم، با سرعت 85 “هان” بر ثانیه توضیح میدادی کلی میخندیدم و یاد میگرفتم من خودم دانشجو مشهد بودم و لهجه تونو دوس دارم ، خدات مدنه مندس مو هم الان فیلماته دیدوم، یرگه خعلی دمت گردمه خخخخ
    با لهجه غلیظ مشهدی بخون، آموزش Sass معرکه بود، همه ی آموزش یه طرف، مثال های فوق العاده کاربردی به کنار، اون قسمت آخر که sass vs css بود و یه سری نکته گفته بودی خیلی کمکم کرد خیلی کارمو راه انداخت یه مشکل اساسی داشتم که حل شد، اگه آموزش ترفند ها و تجربیاتت هم بذاری من با جون و دل خریدارم، نکته ها، رفرنس های خوب رو معرفی کنی، تجربیات یا مشکلاتی که برات پیش اومده ، مث همین ویدیوی آخر این، خیلی خوب بود، خیلی بیشتر از خیلی
    واقعا خدا قوت
    خدا حفظت کنه برامون، آرزومه شاگردیتو بکنم مهندس، حیف که یزد هستم و خیلی دورم
    خیلی حرف زدم سرتو درد آوردم ولی خدایی دمت گردم، ایشالا دست به خاکستر بزنی طلا بشه، چی بگم آخه خیلی کمکم کردی خیلی ، یعنی هرجا میرسم و سایتتو نشون بچه ها میدم میگم رفرنس میخواین اینجا آخرشه
    بازم ممنون خدا قوت

  4. سلام آقای مهندس سیدی.استاد یک دوره اموزشی میذارید که به صورت پروؤه محور یک سایت مثلا سایت خودتان رو از صفر تا صد طراحی کنید؟اصلا امکان این هست؟

  5. سلام.فقط فرانت اند سایت نباشه.مثلا توی دوره فلکس باکس ساخت مودال رو توضیح دادین.ولی مودالی که توضیح دادین به درد سایت واقعی میخوره؟میدونم هدف اون جلسه اموزش فلکس باکس هست نه مودال.خیلی هم عالی هست.ولی دوره ای که من تقاضا میدم ساخت یک سایت پروژه ای واقعی هست.مثلا سایت خودتون.ممنون

  6. با تشکر از شما بخاطر این دوره
    دم عیدی حتما یه تخفیف خوب بزارین من سه تا دوره میخام بخرم
    برای پیش پردازنده ها چنتا دوره دیدم ولی حتما باید تو عید اینم ببینم
    راستی اگه میشه راجب دیزاین سیستم ها حتما یه مقاله ای بنویسید

    به امید دوره های بعدی
    ممنون از شما

  7. سلام استاد وقت بخیر
    من کد زیر رو که داخل ویراشگر وارد میکنم و میخوام کامپایل کنه، بهم پیغام خطا میده که دوتا متغیر نمی تونم بزارم بعد از each@. چطوری باید این مسئله رو حل کنم؟
    https://jsbin.com/pifomud/3/edit?html,css,output
    متن خطا هم به این صورته:
    “Error: Invalid CSS after \”…con in $icons {\”: expected 1 selector or at-rule, was \”{\”\n on line 3 of style.sass\n>> @each $name, $icon in $icons

          1. سلام استاد
            اینرو هم امتحان کردم اما باز هم جواب نداده.
            امکانش هست شما پکیجی اضافه تر نسبت به مواردی که در درس گفتید نصب کرده باشید که از بروز این مشکل جلوگیری کنه؟

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *