توضیحات

اگر به تازگی وارد دنیای طراحی وب شده‌اید مطمئنا نام 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

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

%20 تخفیف ویژه تابستان

از 04 تا 10 تیر ماه
کد تخفیف : summer1401

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

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

  • سلام و خسته نباشید خدمت علی آقا و برو بچ وب پروگ، بابت این دوره عالی و مفید ممنونم ازتون، می خواستم بگم که واقعا شیوه تدریس استاد واقعا عالیه فقط کاش این دوره یکم جامع تر و با مثال های بیشتری همراه بود، مثلا به یه سری نکات که تو داکیومنتیشن سایت خود 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";")

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

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

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

  • سلام استاد من جدیدا تو کامپایلر sass به یک مشکل خوردم
    مثلا چند بار ذخیره کنم تغییرات درست سیو میشه ولی 90 درصد اوقات بعدش اینطوری میشه :

    `{
    "status": 3,
    "message": "File to read not found or unreadable: F:/HTML/home/scss/main.scss",
    "formatted": "Internal Error: File to read not found or unreadable: F:/HTML/home/scss/main.scss\n"
    }`

    چیکار کنم واقعا موندم

    • سلام وقت بخیر.
      این مورد پیش میاد،cmd را ببنید و بصورت administrator باز کنید،همچنین زمانی که کد رو زدید save کنید که کامپایل شروع بشه و تند تند save نکنید

  • سلام استاد دلیل ظهور این ارور چیه؟
    npm : The term 'npm' is not recognized as the name of a cmdlet, function, script file, or
    operable program. Check the spelling of the name, or if a path was included, verify that
    the path is correct and try again.
    At line:1 char:1
    + npm install node-sass
    + ~~~
    + CategoryInfo : ObjectNotFound: (npm:String) [], CommandNotFoundException
    + FullyQualifiedErrorId : CommandNotFoundException

    • سلام وقت بخیر.
      چک کنید که node.js را به درستی نصب کردید و node و npm روی سیستمون نصب هست یا خیر
      ارور که میگه سیستم دستور npm را نمیشناسه، و این دلیلش میتونه عدم نصب npm باشه

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

  • بسیار از آموزش های شما لذت میبرم واقعا خدا خیرتون بده.
    طرز بیان و نحوه آموزش به نظر من خیلی عالیه.
    پروژه هایی که آخر دوره هاتون میسازید خیلی خوبه من بقیه آموزش های اساتید دیگرو دیدم همش میان چهار تا مربع میکشن به اسم مینی پروژه آدم نمیفهمه کاربرد این مطالبی که یاد گرفته چیه ولی شما واقعا مطلب رو برای ما جا میندازید از این بابت ممنونم بسیار زیاد.
    اگر امکانش هست یک آموزش طراحی قالب از صفر تا تبدیلش به وردپرس بسازید چون دوست دارم با تدریس شما یاد بگیرم.

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