توضیحات

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

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

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

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

  • سلام استاد خسته نباشید
    ممنون از اموزش هاتون
    استاد من میخوام نود سَس رو اینستال کنم اما با این خطا روبرو میشم هم با ترمینال هم با سی ام دی
    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 همراه شما استاد گرانقدر که الحق فوق العاده زیبا و در اوج سادگی، روان تدریس میکنید، نهایت تقدیر و سپاسگزاری رو از حضرتعالی داشته باشم و یه خسته نباشید دلی تقدیمتون کنم :)
    بسی لذت بردیم آقای شیخ عزیز ^_^
    انصافا که در فن بیان و مهارت تدریس کم نظیرید و بسیار خرسندم که در فضای مجازی تونستم شما رو پیدا کنم. به امید دیدار در دنیای واقعی و استفاده بیشتر از تجربه ارزشمندتون برای ادامه راه برنامه نویس شدنمون :)
    همیشه و همه جا در زندگیتون موفق و سلامت باشید انشالله

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

  • سلام. وقت بخیر. من موقعی که پروژه رو توی ویژوال استودیو کد باز میکنم و میخوام تغییرات در کدها بدم بعد از تایپ 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 و قصد شخصی سازی داشته باشید و ... که توی دوره اشاره شده.نیازش حس میشه
      از طرفی شما مجبور به استفاده از این ابزارهای نیستید و میتونید بدون اونها هم کار کنید.

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

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

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

    • سلام وقت بخیر.
      ممنون از شما❤
      بله درست میفرمائید زیاد تفاوتی نداره.از کدومش استفاده کنید بستگی به خودتون داره؟!؟!
      یه زمانی شما خودتون صفر تا صد، کد css رو میزنید و میتونید تصمیم بگیرید که از کدومش استفاده کنید.اما ممکن هست شما از یک فریمورک خاص مثله بوت استرپ استفاده کنید و اون فریمورک از sass استفاده میکنه، پس شما sass بلد باشید خیلی ساده تر میتونید شخصی سازی کنید

  • سلام وقتتون بخیر. من برای اجرای پروژه دوباره پکیج هارو ایجاد کردم اما وقتی میخوام npm رو run کنم ارور کش میده و میگه موجود هست. نمیدونم دلیلش چیه.
    قبلا با پارت یک ویدیو اموزشی یکی درست کرده بودم. بخاطر اون هست یا دلیل دییگه ای داره؟

    • الان دقیقا یادم نیست اما میگفت یکی مشابه این فایل داخل کش وجود داره و ادرسشم میداد که مرتبط میشد به فایل های داخل پوشه ویندوز.
      من اون پروژه قبلی رو کلا پاک کردم و وقتی دوباره run کردم اوکی شد.🙏🏻

    • سلام وقت بخیر
      شما میتونید یک فایل sass ایجاد کنید و داخلش از font-face@(مربوط به CSS) استفاده کنید، به هر تعداد که دوست دارید با font-face@ فونت اضافه کنید و این فایل sass را هر کجا دوست داشتید import کنید.

  • درود بر شما و سپاس از آموزش های مفید و کاربردی تون


    یک مسئله برای من پیش اومده در مورد اجرای sass بوسیله node

    طبق آموزش - بعد از این که npm run sass رو می زنم و قائدتاٌ node میره روی حالت watch - دقیقا بعد از اون ، تغییراتی که توی فایل scss می دم حدود 70 درصدش compile نمیشه و برای compile شدنش باید یک تغییر جزئی در حد اضافه کردن یک لاین خالی به سند scss یا چیزی مشابه این انجام بشه - اما بعد از conpile شدن برای تغییر بعدی دوباره این مسئله بوجود میاد -

    editor : VS-Code
    node version : 12.16.1

    • سلام وقت بخیر ممنون.ببیند شما بعد از save کردن کدهاتون compile میشه.و منتظر میمونه شما یه تغییر بدین و دوباره save کنید تا دوباره compile شروع کنه