توضیحات

دوستان این دوره با کیفیت و محتوای بهتری باز تولید شده که با کلیک روی لینک آموزش رایگان sass (ساس) پروژه محور وارد دوره میشوید.

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

SASS مخفف Syntactically Awesome Style Sheets و یک زبان پیش‌پردازنده برای تولید کد Css است. این زبان به هیچ عنوان جایگزین Css محسوب نمی‌شود و می‌توان آن را روشی برای توسعه و مدیریت کدهای Cssدانست.

SASS امکان استفاده از متغیرها (Variables)، دستورات تودرتو (Nesting)، وارد کردن قطعه کدها (Partial Imports)، گروه‌بندی کدها (Mixins)و وراثت (Inheritance)  را در کدهای Css را فراهم می‌کند. کدهای SASS در نهایت کامپایل و به Css تبدیل می‌شوند.

برای بهتر فهمیدن Sass حتما ویدو معرفی در پایین همین قسمت را مشاهده کنید

پیش نیاز دوره :

دوره های پیشنهادی، بعد از گذراندن این دوره :


CSS طراحی وب Sass طراحی سایت

مدرس دوره علی شیخ
مدت دوره 02:28:26
تعداد ویدیو 11

وضعیت دوره : کامل شده
قیمت دوره : رایگان

نظرات ارزشمند شما:

برای ارسال نظر ابتدا باید وارد سایت شوید

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

    • سلام وقت بخیر.
      ممنون از شما و حمایتتون
      خداروشکر دوره براتون مفید بوده

  • سلام عرض ادب متشکرم بابت این دوره .


    1 سوالی اینجا مطرح میشه من دوره های دیگه ای رو هم دیده بودم از وب سایت های دیگه . همه بصورت سطحی دارن آموزش میدن و دوره شما باز قابل قبول تر بود ، داکیومنت sass خیلی پیچیده تر بود و دستورات زیادی داشت . اما اکثر سایت های فارسی زبان بیشتر بحث nesting / mixin / extend رو آموزش میدن . دلیل چیه ؟ آیا در بازار کار این موارد کافیه ؟ آخه داکیومنتش خیلی دستورات بیشتری داره و همش سواله واسم چرا اشاره ای به باقی موارد نمیشه ... داستان از چه قراره؟

    • سلام وقت بخیر.
      ممنون از شما و حمایتتون?
      خداروشکر دوره براتون مفید بوده
      استفاده از موارد دیگه خیلی کم و خاص هستند و موارد اصلی و مهم که استفاده میشند گفته شده
      همچنین این دوره هم با کیفیت و محتوای بهتر باز تولید شده که میتوانید اون دوره را مشاهده کنید.

  • PS E:\برنامه نویسی\دوره آموزش sass\tamrin> npm run sass
    

    > sass@1.0.0 sass
    > node-sass -w scss/ -o dist/css --recursive




    سلام آقای شیخ بعد از زدن دستور NPM Run sass این ارور رو میده و کامپایل انجام نمیشه . دلیل چیست؟ لطفا راهنماییم کنید . مرسی

    • سلام وقت بخیر.
      توی متنی که ارسال کردید اروری داده نشده اگه ارور باشه کنارش مینویسه ارور
      فایل scss را تغیر بدید و سیو و بررسی کنید.

    • سلام وقت بخیر.
      اکثرا که از فریمورک های css مثله بوت استرپ یا تیلویند استفاده میکنند (دوره هر دوتاش توی وب سایت هست) حالا از sass هم در کنارش استفاده میشه بخاطر قابلیت های خوبی که داره

  • بسیار سپاسگزارم از شما بابت تدریس خوبی که دارید. من در سایت مکتبخونه با دوره bootstrap با شما آشنا شدم. الانم دوره sass رو قراره که شروع کنم. سایت شما تخفیف هم میده؟

    • سلام وقت بخیر.
      ممنون از شما و حمایتتون، خداروشکر دوره براتون مفید بوده
      در حال حاضر تخفیفی نداریم

  • فرمایش شما کاملا صحیح هستش ولی در جلسه اول نام پوشه رو هم node-sass گذاشتید
    "scripts": {"sass": "node-sass -w scss/ -o dist/css --recursive"
    }
    وقتی نام پوشه (node-sass)رو عوض می کنم دیگه main.css در پوشه distتشکیل نمی شه

    • سلام وقت بخیر.
      اصلا ما پوشه ای به اسم node-sass ایجاد نکردیم و نگفتیم پوشه هست!!
      این اسکریپت میگه که node-sass بیا برای من محتویات پوشه ای به اسم scss را ببین (اسم این پوشه هر چیزی میتونه باشه) و اونو کامپایل کن و بریز توی پوشه ای به اسم css که داخل پوشه ای به اسم dist هست (اسم این پوشه هم هر چیزی میتونه باشه).
      حتما چند بار ببینید قسمت ها را و از طرفی لطف کنید در کامنت کدهاتون را بین سه عدد بک تیک قرار بدید و ارسال کنید.

  • سلام و خسته نباشید و تشکر
    به جای اسم پوشه node-sass هر اسم دیگه که انتخاب می کنم برنامه main.css رو درست نمیکنه
    یعنی ما نباید اسم پوشه مون رو عوض کنیم

    • سلام وقت بخیر.
      چه قسمتی؟ زیر قسمت مربوطه کامنت کنید.
      پوشه node-sass نداریم، بلکه از پکیجش استفاده شده برای کامپایل

  • سلام و خسته نباشید خدمت علی آقا و برو بچ وب پروگ، بابت این دوره عالی و مفید ممنونم ازتون، می خواستم بگم که واقعا شیوه تدریس استاد واقعا عالیه فقط کاش این دوره یکم جامع تر و با مثال های بیشتری همراه بود، مثلا به یه سری نکات که تو داکیومنتیشن سایت خود sass هست اشاره نشده و من خودم وقتی می خونمش یکم برام ابهام داره مطمئنا برای خیلیا اینجوریه، کاش اگه میشد لااقل یه مرور خیلی کلی از رو داکیومنتیشن انجام میشد. مثل دوره بوت استرپ 5 که واقعا میشه گفت هیچی از قلم انداخته نشده. و در آخر ممنون بابت زحماتتون❤️

    • سلام وقت بخیر.
      ممنون از شما، انشاا... در آینده این دوره را با کیفیت بهتری باز تولید میکنیم.

    • سلام وقت بخیر.
      ببینید اینها مواردی هستند که sass به شما میده و ممکنه توی پروژه ای نیاز بشه و یا حتی توی پروژه ای دیگه شما ببینید به همین دلیل نیاز هست که باهاش آشنا باشید.

  • سلام یه سوال
    برای پروژه vue میخوام sass رو به پروژه اضافه کنم باید از این دستور استفاده کنم ؟
    npm install -D sass-loader node-sass
    یا از این دستور ؟
    npm install -D sass
    ظاهرا یکی هست و دستور پایینی در برگیرنده دوپکیج بالایی هست؟
    اگر نیست چه تفاوتی دارن؟

    • سلام وقت بخیر.
      اگه از vue-cli استفاده میکنید، طبق داکیومنت از این دستور میتونید استفاده کنید
      npm install -D sass-loader sass
      پکیج sass-loader برای webpack هست، چون vue-cli از webpack استفاده میکنه و دوره webpack پیش نیاز دوره vue هست.

  • سلام استاد خسته نباشید
    ممنون از اموزش هاتون
    استاد من میخوام نود سَس رو اینستال کنم اما با این خطا روبرو میشم هم با ترمینال هم با سی ام دی
    npm ERR! code ENOSELF
    npm ERR! Refusing to install package with name "node-sass" under a package
    npm ERR! also called "node-sass". Did you name your project the same
    npm ERR! as the dependency you're installing?
    npm ERR!
    npm ERR! For more information, see:
    npm ERR! <https://docs.npmjs.com/cli/install#limitations-of-npms-install-algorithm>

    npm ERR! A complete log of this run can be found in:
    npm ERR! C:\Users\narges.salehi\AppData\Roaming\npm-cache\_logs\2021-09-17T18_05_40_527Z-debug.log

    لطف میکنید کمک کنین؟

    • سلام وقت بخیر.
      اگه مراحل را درست رفته باشید نباید ارور بده، یکبار دیگه مراحل را با دقت و روی یک پروژه جدید تست کنید.

  • سلام استاد وقت تون بخیر با ویندوز 7 نمیتونیم nodejs رو نصب کنیم
    ببخشید من وقتی nodejs رو نصب میکنم می نویسی باید از ویندوز 8 به بالا استفاده بشه
    ممنونم اگه راهنمایی کنید

    • سلام وقت بخیر.
      سرچ کنید اگه شد نصب کنید، نشد ویندوز ۱۰ نصب کنید.

  • سلام ممنون از آموزش خیلی خوبتون?
    ی سوال داشتم
    اگر برای کامپایل کردن sass بجای استفاده از npm ازاکستنشن خود vs code به اسمlive compilation sass استفاده کنیم مشکلی ایجاد نمیکنه؟! چون فایل Package. json ایجادنمیشه؟؟

    • سلام وقت بخیر.
      ممنون از شما، بله میتونید استفاده کنید ما حتی از koala هم که یک نرم افزاره استفاده کردیم، فایل package.json مربوط به npm هست که یک پکیج منیجره جاوااسکریپتی هست و چون کامپایلری که استفاده میکردیم یک پکیج جاوااسکریپتی بود، نیاز بود با npm نصبش کنیم.دوره ای npm هم توی وبسایت قرار دادیم.

  • سلام ممنون از آموزش های خوبتون ببخشید چطوری میشه با sass کد های bootstrap رو تغییر داد؟ بیشتر منظورم دستورات اولیش هست چون تو خود سایت bootstrap تا حدودی گفته بقیشو آیاجایی در دوره ها بهش اشاره کردین؟

    • سلام وقت بخیر.
      ممنون از شما.
      توی بوت استرپ در انتهای هر بخش متغییر های sass را گفته که میتونید تغییر بدید.
      انشاا... توی دوره ای بوت استرپ ۵ در دنیای واقعی در قالب پروژه توضیح میدیم.

  • با سلام و احترام
    بر خودم لازم دونستم بعد از سپری کردن سه دوره flexbox ، grid layout و sass همراه شما استاد گرانقدر که الحق فوق العاده زیبا و در اوج سادگی، روان تدریس میکنید، نهایت تقدیر و سپاسگزاری رو از حضرتعالی داشته باشم و یه خسته نباشید دلی تقدیمتون کنم :)
    بسی لذت بردیم آقای شیخ عزیز ^_^
    انصافا که در فن بیان و مهارت تدریس کم نظیرید و بسیار خرسندم که در فضای مجازی تونستم شما رو پیدا کنم. به امید دیدار در دنیای واقعی و استفاده بیشتر از تجربه ارزشمندتون برای ادامه راه برنامه نویس شدنمون :)
    همیشه و همه جا در زندگیتون موفق و سلامت باشید انشالله

    • سلام وقت بخیر.
      ممنون از شما?
      خداروشکر که دوره ها براتون مفید بوده.

    • دوره های bootstrap 5 و bootstrap 5 در دنیای واقعی رو هم ببین و حالشو ببر، خیلی جامع هستن و واقعا اگه تمرین داشته باشی کامل مسلط میشی، من آموزشای بوت استرپ سایتای دیگرم چک کردم از رو تجربه میگم واقعا دوره استاد شیخ به مراتب روان تر و سرتر از بقیه س. به دور از هر پیچیدگی و ابهام و توضیح اضافی ای. یه مزیت بزرگ دیگه ای هم که داره اینه که از رو داکیومنتیشن توضیح داده میشه و خب اگه مثلا یه پارت از دوره رو دیدی و مثلا جاهاییشو یادت رفت فقط کافیه بری داکیومنتیشنشو مرور کنی و این داستان روند یادگیری رو به شدت تسریع و تقویت میکنه.

    • سلام وقت بخیر.
      ممنون از شما?
      ممنون میشم برای حمایت دوره ها را از سایت تهییه کنید، واقعا برای دوره ها زحمت کشیده شده

  • سلام. وقت بخیر. من موقعی که پروژه رو توی ویژوال استودیو کد باز میکنم و میخوام تغییرات در کدها بدم بعد از تایپ npm run sass به این ارورها میخورم.
    '''npm ERR! code ELIFECYCLE
    npm ERR! errno 1
    npm ERR! sass-site@1.0.0 sass: `node-sass -w scss/ -o dist/css --recursive`
    npm ERR! Exit status 1
    npm ERR!
    npm ERR! Failed at the sass-site@1.0.0 sass script.
    npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

    npm ERR! A complete log of this run can be found in:
    npm ERR! C:\Users\Vahid\AppData\Roaming\npm-cache\_logs\2021-06-20T08_13_18_432Z-debug.log'''
    چطور میتونم این مشکل رو حل کنم؟

    • سلام وقت بخیر.
      ارور چیز خاصی نگفته،لطف کنید یکبار دیگه ویدیو را با دقت ببینید،از طریق cmd ویندوز بصورت administrator تست کنید.اگه در سطح مبتدی هستین از برنامه koala استفاده کنید.

  • سلام اقای شیخ خسته نباشید و ممنون که در سوالات و مشکلات پیش امده راهنمایی میکنید
    من میخواستم بوت استرپ رو با sass سفارشی سازی کنم کامپایلر Live Sass Compile رو روی vs code نصب کردم اما وقتی میزنم کامپایل بشه این ارور رو میده: ("Compilation Error
    Error: no mixin named -assert-ascending
    on line 320 of sass/c:\Users\Pouriya\Desktop\New folder (9)\node_modules\bootstrap\scss\_variables.scss
    from line 1 of sass/c:\Users\Pouriya\Desktop\New folder (9)\node_modules\bs-custom\app.scss
    >> @include _assert-ascending($grid-breakpoints, "$grid-breakpoints");")
    تو فایل scss هم این import ها رو کردم:
    ("import"../bootstrap/scss/variables";
    @import"../bootstrap/scss/bootstrap.scss";
    @import"../bootstrap/scss/functions";
    @import"../bootstrap/scss/mixins";")

    لطفا اگه براتون مقدور بود اموزش سفارشی سازی بوت استرپ رو قرار بدید

    با سپاس فراوان

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