پیش پردازنده Sass یکی از ارکان مهم توسعه وب در این روزها به حساب می آید به همین دلیل این دوره بصورت کامل به آموزش این موضوع می پردازد.
پیشنیازها
مواد درسی
| موضوع جلسه | مدت زمان ویدیو |
|---|---|
| مقدمه | 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 دقیقه |
ویدیو نمونه
دانلود دوره
می توانید از لینک زیر اقدام به خرید این دوره کنید:
سلام
اول تشکر میکنم بابت آموزش های عالیتون که واقعا به من کمک زیادی کرد.
دوم در مورد لزوم یادگیری sas سوال داشتم
شما در این ویدئو فقط از مزایای CSS نسبت به sas گفتین من واقعا نمیدونم چه ازومی داره بخام sas یاد بگیرم !!
سلام،
این ویدیو فقط یکی از بیست قسمت این دوره است.
دلیل انتخاب این مبحث هم برای دموی این دوره، این هستش که این مبحث برای خیلی ها سواله، “تفاوت متغیرهای Sass و CSS”، من خواستم اون کسانی که نمیخوان این دوره رو خرید کنند هم حداقل یک نکته خاصی رو در مورد CSS یاد بگیرند، و الا از نظر تبلیغاتی دقیقا همین چیزی هستش که شما میگین، طرف میگه خوب پس چرا Sass یاد بگیرم!؟
و اینکه لزوم یادگیری Sass هم من رو یاد این ضرب و المثل میندازه که میگه: “حلوای تنتنانی تا نخوری ندانی” :)
هنوز توی CSS به جایی نرسیدیم که بشه اون طوری که با Sass یک پروژه رو سازماندهی می کنیم توی CSS هم انجام بدیم و خیلی فاصله داریم. مخصوصا توی پروژه های متوسط و بزرگ. و بدون Sass واقعا به شخصه توی پروژه های بزرگ نمیدونم باید چکار کنم.
براتون آرزوی موفقیت میکنم.
سلام ببخشید من دوره رو خریداری کردم ولی فیلم ها درست داخل گوشیم پخش نمیشه .صداش مشکل داره .
سلام، آره با عرض پوزش من یک اشتباهی در مورد مونو بودن صدا کردم در زمان ادیت ویدیوها که باعث میشه صدا فقط از یکی از اسپیکرها یا هدفن شما خارج شه، امیدوارم وقت بشه و من این موضوع رو درستش کنم در آینده. البته اگر منظورتون از خراب بودن همین بود.
سلام استاد خسته نباشید:
سوالم اینه که ایا میشه گفت الان بهترین پیش پردازنده sass هستش؟ این شاید سوال بسیاری باشه
و اینکه دقیقا تفاوت و احیانا برتری sass نسبت به سایر پیش پردازنده در چیست ممنون میشم اگر کامل توضیح بدید؟
و بنده دوره فلکس باکس و گرید رو کار کردم و احساس میکنم دیگه لزومی به استفاده از فریموورک هایی مثل بوتس ترپ نباشه، یعنی تمایل ندارم از فریم های استفاده کنم، ایا این تفکر اشتباهه و من اشتباه میکنم یا اینکه این دو ماژول میتونن کاملا جایگزین فریموورک های جور واجور بشن؟؟؟؟؟؟؟
سلام، ممنون از سوالتون
احتمالا تا چند روز دیگه یک بخش سوالات متداول توی پست ایجاد میشه، و سوالات احتمالی دوستان رو جواب میده، تا اون موقع:
پیش پردازنده ها اول با هم خیلی متفاوت بودند ولی کم کم ویژگی های خوب هم رو کپی کردن و خیلی شبیه به هم شدند، مخصوصا Stylus و Sass
نکته اصلی که باعث میشه اصلا شما دنبال بررسی فنی نباشید، این هستش که جامعه ای که دارند از Sass استفاده میکنن اصلا قابل مقایسه نیستن از نظر آماری با بقیه موارد، خب این باعث میشه که شما حتما یادگیری Sass رو توی برنامه تون داشته باشید. این یعنی اگر قراره وارد یک تیم بشید، احتمال خیلی زیاد از Sass استفاده میکنن، این یعنی اکثر فریمورک های معروف دنیا دارند از Sass استفاده میکنن و الا آخر…
مثلا یک نظرسنجی در سال 2018 نشون میده که 65 درصد از Sass استفاده میکنن، و بقیه پیش پردازنده ها زیر 10 درصد هستن.
من به شخصه سینتکس Sass رو بیشتر می پسندم. من خودم قبل از Sass با پیش پردازنده Stylus کار میکردم (تقریبا 5 سال پیش).
در مورد سوال آخرتون هم، به هیچ عنوان این تفکر اشتباه نیست، هر کاری که اون فریمورک ها انجام بدند، شما می تونید انجام بدید، و شما محدود به فریمورک نیستید. در نتیجه جمله باید اینطوری باشه، کارهایی که فریمورک ها انجام میدند یک گوشه ای از کارهایی هستش که شما می تونید انجام بدید :)
فریمورک ها سه مورد استفاده دارن:
1. یا افرادی که استفاده میکنن CSS رو به خوبی بلد نیستند و نمی تونن صفحه آرایی کنند. (چون بیشترین دلیل استفاده افراد از فریمورک ها صفحه آرایی هستش، مخصوصا واکنشگرا بودن صفحه.)
2. طراحی پروژه بر اساس اون فریمورک انجام شده، یعنی طراح بوتسترپ رو نگاه کرده و طراحی کرده، خب من اینجا اگر از این فریمورک استفاده کنم “خیلی” سریع می تونم پروژم رو پیاده سازی کنم.
3. تیم مجبور میکنه افراد رو برای استفاده از یک فریمورک خاص.
در کل توصیه من:
صفحه آرایی رو یاد بگیرید، بعد از اون فریمورکهای مختلف رو هر کدوم میتونید در کمتر از یک ساعت منطق پشتش رو بفهمید، پس هر زمان نیاز داشته باشید می تونید ازشون استفاده کنید.
موفق باشید.
ابتدا بابت پاسخ گوییتون ممنونم و توضیحات بسیار کامل بود.
بنده به شخصه به قدرت بالای فلکس باکس و گرید پی بردم و یک پروژه را در حال انجام هستم که در صورت اتمام خدمتتون ارسال میکنم تا نظرتون را بفرمایید.
اما به عنوان سوال اخر، بنده در حال یادگیری دیزاین و طراحی سایت هستم و چون قبلا طراح فتوشاپ و ایلوستریتور بودم الان تمام ایده ها رو میخوام به قالب های داینامیک و ریسپانسیو تبدیل کنم و روش هاش رو هم تا حدودی فرا گرفتم و به طراحی و برنامه نویسی سمت کاربر در حال حاضر به چشم یک شغل نگاه میکنم، و با توجه به اینکه تازه سربازیم تموم شده و شرایط مالیم اصلا خوب نیست و از طرفی میخوام شغل ایندم رو انتخاب کنم خواستم ببینم ایا به طراحی و کدنویسی سایت میشه به چشم یک شغل با درامد خوب نگاه کرد، چیزی که فرد ارزشش رو داشته باشه تا بخشی از عمرش رو اختصاص بده؟؟؟ ببخشید که طولانی شد اما جوابش برام مهمه و مدتی ذهنم رو درگیر کرده و چون شما تجربه دارید در این زمینه خوشحال میشم راهنمایی بفرمایید استاد ؟؟؟؟
سول سختیه راستش :) مخصوصا اون قسمتیش که میگید ارزشش رو داره که بخشی از عمرتون رو بزارید.
از نظر درآمد بسته به توانایی تون میتونه درآمدش خوب باشه. خیلی ها دارند با این شغل زندگیشون رو می چرخونند حتی با سن های بالا. ولی خب آینده نگر کار کنید همیشه و کارتون رو وسعت بدید. یک نکته خوبی هم که داره از معدود حرفه هایی هستش که میشه دورکاری یا مثلا فریلنسری کار کرد.
سلام
از منوی
Accessibility> hearing > mono audio
میتونید کانال صدایی که از گوشی خارج میشه رو combine کنید
و صدا رو به صورت مونو و تقسیم شده از هر دو اسپیکر گوش کنید
سلام آقای مهندس.خدا قوت.ممنونم
ممنون از انتشار این دوره .. حتما توی این ماه تهیه میکنم . به امید دوره های جدید <3
همیشه شاد و پیروز باشید .
مهندس مجتبی ، یه به قول من سید جان، خیلی دمت گرم، خیلی خسته نباشی ، خیلی ممنونم ازت
آموزش sass رو که میخواستم بگیرم زده بودی 39 تومن رگ یزدیم زد بالا خخخخ و زورم اومد اول و خواستم ایمیل بدم کد تخفیف بدی بهم، ولی گفتم نه، خلاصه هرجوری بود کنار اومدم و خریدم، همین الان یعنی ساعت 12:54 دقیقه ی شب آخرین ویدیو رو دیدم، واقعا ممنونم ازت اون 39 تومن از شیر مادر حلال ترت، ایشالا هرچی از خدا میخوای بهت بده، ادامه بده یعنی مث چی بگم منتظرم اموزش gulp و react js برامون بذاری ، من اینا حالیم نیست باید بذاری برامون و این بخدا به گردنته مهندس، دینتو ادا کن زکات علمتو بده، خیلی قشنگ توضیح داده بودی یه شوخی هم بکنم، با سرعت 85 “هان” بر ثانیه توضیح میدادی کلی میخندیدم و یاد میگرفتم من خودم دانشجو مشهد بودم و لهجه تونو دوس دارم ، خدات مدنه مندس مو هم الان فیلماته دیدوم، یرگه خعلی دمت گردمه خخخخ
با لهجه غلیظ مشهدی بخون، آموزش Sass معرکه بود، همه ی آموزش یه طرف، مثال های فوق العاده کاربردی به کنار، اون قسمت آخر که sass vs css بود و یه سری نکته گفته بودی خیلی کمکم کرد خیلی کارمو راه انداخت یه مشکل اساسی داشتم که حل شد، اگه آموزش ترفند ها و تجربیاتت هم بذاری من با جون و دل خریدارم، نکته ها، رفرنس های خوب رو معرفی کنی، تجربیات یا مشکلاتی که برات پیش اومده ، مث همین ویدیوی آخر این، خیلی خوب بود، خیلی بیشتر از خیلی
واقعا خدا قوت
خدا حفظت کنه برامون، آرزومه شاگردیتو بکنم مهندس، حیف که یزد هستم و خیلی دورم
خیلی حرف زدم سرتو درد آوردم ولی خدایی دمت گردم، ایشالا دست به خاکستر بزنی طلا بشه، چی بگم آخه خیلی کمکم کردی خیلی ، یعنی هرجا میرسم و سایتتو نشون بچه ها میدم میگم رفرنس میخواین اینجا آخرشه
بازم ممنون خدا قوت
سلام آقای مهندس سیدی.استاد یک دوره اموزشی میذارید که به صورت پروؤه محور یک سایت مثلا سایت خودتان رو از صفر تا صد طراحی کنید؟اصلا امکان این هست؟
سلام، صفر تا صد رو برام تعریف میکنید، ببینم منظورتون چیه؟
سلام.فقط فرانت اند سایت نباشه.مثلا توی دوره فلکس باکس ساخت مودال رو توضیح دادین.ولی مودالی که توضیح دادین به درد سایت واقعی میخوره؟میدونم هدف اون جلسه اموزش فلکس باکس هست نه مودال.خیلی هم عالی هست.ولی دوره ای که من تقاضا میدم ساخت یک سایت پروژه ای واقعی هست.مثلا سایت خودتون.ممنون
با تشکر از شما بخاطر این دوره
دم عیدی حتما یه تخفیف خوب بزارین من سه تا دوره میخام بخرم
برای پیش پردازنده ها چنتا دوره دیدم ولی حتما باید تو عید اینم ببینم
راستی اگه میشه راجب دیزاین سیستم ها حتما یه مقاله ای بنویسید
به امید دوره های بعدی
ممنون از شما
با سلام
شما در این دوره از Ruby استفاده کردید یا Node.js ؟
سلام، node.js
سلام استاد وقت بخیر
من کد زیر رو که داخل ویراشگر وارد میکنم و میخوام کامپایل کنه، بهم پیغام خطا میده که دوتا متغیر نمی تونم بزارم بعد از 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
سلام، علامت کوتیشن دور اسم ها رو بردارید: “eye” بشه eye
سلام مجدد و متشکرم بابت پاسختون.
برداشتم اما مشکل حل نشد.
سمیکالون نزاشتین:
https://jsbin.com/yoceder/1/edit?html,css,output
سلام استاد
اینرو هم امتحان کردم اما باز هم جواب نداده.
امکانش هست شما پکیجی اضافه تر نسبت به مواردی که در درس گفتید نصب کرده باشید که از بروز این مشکل جلوگیری کنه؟
سلام
قیمت بالاست عزیز لطفا یکم معقولانه تر قیمت گذاری کنید تا قشر دانشجو به مشکل بر نخوره
با تشکر
سلام آقای سیدی گل
واقعا عاشق خودت و سایتت و فن بیان و آموزش هات شدم
امروز این دوره رو تموم کردم نووووش جونت واقعا قیمتش بیشتر ازیناس کاملترین دوره فارسیه دمت گرم
میخواستم ببینم دوره webpack کی شروع میشه ؟
سید جان من این دوره رو خریدم ممنون بابت تخیفتون؛ ولی واقعا واسه بقیه دوره ها بودجه ندارم لطفا اگه میشه تخفیف رو بیشتر کنید ما دانشجو ها گناه داریم.
سلام. ممنون از دوره خوبتون.
من توی اکسارکت مشکل داشتم و قسمت های 11 و 20 اکسترکت نشد.
سلام، معمولا وقتی فایل ها درست دانلود نمیشه این اتفاق میافته. زمانی که اتصال اینترنتتون وضعیت بهتری داره اون موقع فایل رو دانلود کنید، فایل ها مشکلی نخواهند داشت.
سلام وقت بخیر
این دوره پروژه عملی هم داره؟اگه میشه دمو پروژه رو بزارید ممنون
سلام مهندس جان وقت بخیر ببخشید مهندس جان من sass بلد و فقط میخواستم بهتون بگم که من فقط قسمت معماری فایل ها در پروژه‌های Sass را میخوام بخرم لطفا لطف کنید که من چطور براتون پول این قسمت را براتون بفرستم که بتونم این قسمت را ببینم چون میخوام بدونم چطور بتونم در پروژه های واقعی از معماری sass استفاده کنم مهندس لطفا خیلی زود جواب بدید خیلی خیلی ممنون
سلام، ایمیلتون رو چک کنید.
سلام خسته نباشید من این دوره رو قبلا خریده بودم الان ندارمش. چجوری میتونم دوباره دانلود کنم؟
سلام، جواب ایمیل رو دادم خدمتتون.
سلام خسته نباشید
من تو scss از حالت nesting استفاده میکنم مثلا یه dv-header میزارم هر چی کد مربوط به هدر هست رو میزارم اونجا.
و این کار طبیعتا باعث مبشه تو css یه سلکتور طویل کامپایل بشه.
dv-header dv-header-content dv-menu li a =>> اینجوری میشه مثلا.
و الان من میام از at-root استفاده میکنم برای مثلا dv-menu,. میخواستم بدونم ک مشکلی نیست و خوبه که از این استفاده میکنم یا راه بهتری هست؟؟
سلام، سعی کنید از تودرتویی زیاد دوری کنید، مطلب مربوط به روش BEM رو در سایت مطالعه کنید.
سلام خسته نباشید
میخواستم بدونم ک امکانش هست دوره git هم برگزار کنید؟؟
سلام…وقتتون بخیر…دوره بوت استرپ رو چرا برگزار نمیکنید؟؟؟؟؟؟؟؟
سلام، من ترجیحم اینه بچه ها درک پایه‌ای خوبی از سی اس اس پیدا کنند (هدف دوره‌های سایت)، بعد از اون دیگه خودشون از هر کتابخونه ای که دوست داشته باشن میتونن با چند ساعت مستند خوندن استفاده کنن.