Sass / SCSS COMPLETE Tutorial (+ Node.js & NPM) with Real-World Example

Поділитися
Вставка
  • Опубліковано 17 гру 2024

КОМЕНТАРІ • 45

  • @neatunet
    @neatunet 2 роки тому +5

    Thank you! I'm so glad I found your channel. Not only did you explain how to use SASS, but also told about npm and what the node_modules are. I subscribed to your channel 😊
    Please, continue doing these tutorials, I'm sure that you'll be popular one day!

  • @smnahin345
    @smnahin345 2 роки тому +2

    Wow..!!! What an excellent tutorial.
    Thank you so much. I was suffering for a long time using sass.
    But you made it easy for me. Thanks

  • @a.alrawi9725
    @a.alrawi9725 6 місяців тому +2

    one of the most useful explanations, it is amazing.

  • @khorajia
    @khorajia 2 роки тому +3

    Of all the tutorials available on SASS, this one is by far the best one here on UA-cam. Great explanation.
    Appreciate your efforts in creating this tutorial.
    Thank you.
    PS. Keep the style of your teaching same across all tutorials. Subscribed to your channel.

    • @Yoshiic
      @Yoshiic 2 роки тому +1

      i'm agree , this was very helpful

  • @bibakomk
    @bibakomk Рік тому +1

    thanks for sharing it was so easy to follow along really appreciate it!

  • @alfaroleonsebas97
    @alfaroleonsebas97 Рік тому +1

    Excellent tutorial, thanks. I would like to know if there is a way to compile all the scss files in a folder at once with one script.

  • @isakwberg
    @isakwberg 9 місяців тому

    this was great. i appriciate the lovely dead pan joke of "you should read this ofcourse" at 16.50
    which is maybe not a joke, but also pretty much a joke.

  • @BSITVinluanEner
    @BSITVinluanEner 2 роки тому +3

    I love how relax yu explain information and btw is it okay to go with scss for 2022?

    • @ByteGrad
      @ByteGrad  2 роки тому +1

      Thanks! Absolutely, I use it in many projects

  • @monambike
    @monambike 2 роки тому +1

    amazing video, u explain pretty well, thank u so much for sharing your acknowledgement, work and dedication!

  • @emarekica
    @emarekica 2 роки тому +1

    Lovely, thank you for detailed explanations!

  • @وانەکانیپۆلی
    @وانەکانیپۆلی 2 роки тому +1

    Great explanation, keep on ✌🏻

  • @Ozla102
    @Ozla102 Рік тому +1

    the one im looking for! thx

  • @ByteGrad
    @ByteGrad  2 роки тому

    Hi, mastering CSS is critical as a front-end developer: www.udemy.com/course/professional-css/?referralCode=4C3C08E82629E6B15752
    Also, mastering JavaScript is critical if you want to be a modern, professional developer: www.udemy.com/course/professional-javascript-course/?referralCode=0C1D5752923168BC87C2

  • @jairorodrigues4815
    @jairorodrigues4815 2 роки тому +1

    Great tutorial, what vs code font you are using?

    • @ByteGrad
      @ByteGrad  2 роки тому +1

      It’s the Monokai theme

  • @ЕдгарПрокудін
    @ЕдгарПрокудін 2 роки тому +1

    AMAZING!!!!!!!! thanks a lot!!

  • @parkerAmv
    @parkerAmv 2 роки тому +1

    Thanks a lot this is really help me, because im not really good at english but i can understand what your are saying

    • @ByteGrad
      @ByteGrad  2 роки тому +1

      Great to hear, Parker!

  • @Laughteragency
    @Laughteragency 2 місяці тому +1

    Thanks alot sir. I really appreciate you

  • @master_shifuuu
    @master_shifuuu Рік тому

    It would be great if you installed css autoprefixer with sass and teach us how to add autoprefixer to the project.

  • @adevikthur
    @adevikthur 14 днів тому +1

    THANK YOU SO MUCH!

  • @وانەکانیپۆلی
    @وانەکانیپۆلی 2 роки тому +1

    Hello , Can’t we just use live dass compiler instead of using node.Js and downloading npm packages ? Thanks

    • @ByteGrad
      @ByteGrad  2 роки тому +1

      Yes, that would work too

  • @elric7371
    @elric7371 2 роки тому +1

    Good tutorial. I do have questions this line "compile":"sass --watch --no-source-map main.scss main.css" is it possible that i can select the main.scss from a specific folder in the project as well as have the main.css compile to a specific folder? Thanks

    • @ByteGrad
      @ByteGrad  2 роки тому +3

      EDIT:
      Thanks. Yes, absolutely. These are just file paths. Example:
      "compile": "sass --watch --no-source-map ./another/main.scss ./dist/main.css"
      This would look for a folder named ‘another’ in the same folder (./) as the package.json file, then select the main.scss in there. For the output, it would look for a folder called ‘dist’ in the same folder (./) as the package.json file and put the compiled css file in there.
      ‘main.scss' and 'main.css' are technically also paths, they could also be written as ‘./main.scss’ and ‘./main.css’.

  • @TrainYourDragon999
    @TrainYourDragon999 2 роки тому +1

    very good lesson i love it , thanks

  • @rickokodr--
    @rickokodr-- 2 роки тому

    Thank you for this useful lesson. but how i can put all files under the watch command

    • @ByteGrad
      @ByteGrad  2 роки тому

      Try using live-server as normal

  • @MMIStudios
    @MMIStudios 2 роки тому

    Great tutorial. Is there a way to compile all files in a directory? I tried using wildcards like "compile": "sass --watch --no-source-map src/style/*.scss src/style/*.css" but that failed.

    • @ByteGrad
      @ByteGrad  2 роки тому +1

      Good question. It doesn’t seem possible. But you can import all the other Sass files into a main.scss file and compile that 1

    • @MMIStudios
      @MMIStudios 2 роки тому +1

      @@ByteGrad what I ended up doing was creating a script for each scss file and then joining them all in the dev script using the “concurrently” package. I am actually now using this method to not just compile my css but for starting both the client and server of my entire MERN app.

    • @ByteGrad
      @ByteGrad  2 роки тому

      Interesting

  • @DoveDev
    @DoveDev 2 роки тому

    I hope you make somthing together with js files and like how to use "type": ""module", with live server and stuff like

    • @ByteGrad
      @ByteGrad  2 роки тому +1

      It’s probably too niche for UA-cam, but that is 100% part of my JavaScript course

  • @venomoussteel8933
    @venomoussteel8933 7 місяців тому +1

    thanks a lot

  • @adhdmed
    @adhdmed 2 роки тому +1

    Great Tutorial, really appreciate it. Can you please provide a link to the source code?

    • @ByteGrad
      @ByteGrad  2 роки тому +1

      Here you can find the final code: github.com/ByteGrad/Professional-CSS-Course/tree/master/BetterPhotos/video-20

    • @adhdmed
      @adhdmed 2 роки тому +1

      @@ByteGrad thanks buddy

  • @ibrahimbek2804
    @ibrahimbek2804 2 роки тому +1

    thank you

  • @muhammaddwisusanto5925
    @muhammaddwisusanto5925 2 роки тому +1

    good

  • @leandramps
    @leandramps Рік тому

    npm should be run outside of the Node.js REPL, in your normal shell.
    (Press Ctrl+D to exit.)
    Nope, not working

    • @ByteGrad
      @ByteGrad  Рік тому

      Hi, what specifically isn’t working?

  • @abdonasr342
    @abdonasr342 2 роки тому +1

    AMAZING!!!!!!!! thanks a lot!!