Sass / SCSS COMPLETE Tutorial (+ Node.js & NPM) with Real-World Example
HTML-код
- Опубликовано: 27 июл 2024
- 👉 NEW React & Next.js Course: bytegrad.com/courses/professi...
Hi, I'm Wesley. I'm a brand ambassador for Kinde (paid sponsorship). I'll help you master the latest tech here:
👉 Professional JavaScript Course: bytegrad.com/courses/professi...
👉 Professional CSS Course: bytegrad.com/courses/professi...
👉 Email newsletter (React + Next.js course out soon!): email.bytegrad.com
💻 Premium Courses:
Professional JavaScript: bytegrad.com/courses/professi...
Professional CSS: bytegrad.com/courses/professi...
All courses: bytegrad.com/courses
🔔 Email newsletter (get notified of new courses): email.bytegrad.com
⏱️ Timestamps:
0:00 - Intro: learn Sass because you will see it often as a developer
0:40 - Create a Sass file (SCSS syntax)
1:33 - Copy everything from CSS-file to Sass-file
2:38 - Benefits of using Sass today
3:04 - Benefit 1 of Sass: nesting (with &)
8:31 - Benefit 2 of Sass: variables (with $) - better syntax than custom properties in plain CSS
14:57 - Benefit 3 of Sass: comments in Sass
15:50 - Compile Sass / SCSS to CSS
16:14 - Use Node.js and NPM to compile Sass to CSS
18:20 - Using the terminal in VS Code
19:05 - node -v (command) to see current Node.js version installed
19:54 - Initialize project for NPM (everything is a package in NPM)
20:25 - package.json file
20:48 - Using NPM-package to compile Sass into CSS
21:34 - npm install sass
24:29 - Write a script in package.json to use the NPM-package we just installed
25:37 - Running an NPM-script
27:55 - We don't want the sourcemap file (use --no-source-map)
29:17 - Automatic compiling with --watch
31:35 - Summary
#css #sass #scss #sassscss #csssass #webdevelopment #coding #programming 
Наука
one of the most useful explanations, it is amazing.
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!
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
amazing video, u explain pretty well, thank u so much for sharing your acknowledgement, work and dedication!
thanks for sharing it was so easy to follow along really appreciate it!
Lovely, thank you for detailed explanations!
AMAZING!!!!!!!! thanks a lot!!
the one im looking for! thx
very good lesson i love it , thanks
Thanks for your clean explanations
Great explanation, keep on ✌🏻
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.
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.
thanks a lot
Of all the tutorials available on SASS, this one is by far the best one here on RUclips. 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.
i'm agree , this was very helpful
thank you
I love how relax yu explain information and btw is it okay to go with scss for 2022?
Thanks! Absolutely, I use it in many projects
Thanks a lot this is really help me, because im not really good at english but i can understand what your are saying
Great to hear, Parker!
It would be great if you installed css autoprefixer with sass and teach us how to add autoprefixer to the project.
good
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
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’.
Hello , Can’t we just use live dass compiler instead of using node.Js and downloading npm packages ? Thanks
Yes, that would work too
Great tutorial, what vs code font you are using?
It’s the Monokai theme
Thank you for this useful lesson. but how i can put all files under the watch command
Try using live-server as normal
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
I hope you make somthing together with js files and like how to use "type": ""module", with live server and stuff like
It’s probably too niche for RUclips, but that is 100% part of my JavaScript course
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.
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
@@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.
Interesting
Great Tutorial, really appreciate it. Can you please provide a link to the source code?
Here you can find the final code: github.com/ByteGrad/Professional-CSS-Course/tree/master/BetterPhotos/video-20
@@ByteGrad thanks buddy
npm should be run outside of the Node.js REPL, in your normal shell.
(Press Ctrl+D to exit.)
Nope, not working
Hi, what specifically isn’t working?
AMAZING!!!!!!!! thanks a lot!!