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

👉 NEW React & Next.js Course: https://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: https://bytegrad.com/courses/professi... 👉 Professional CSS Course: https://bytegrad.com/courses/professi... 👉 Email newsletter (React + Next.js course out soon!): https://email.bytegrad.com 💻 Premium Courses: Professional JavaScript: https://bytegrad.com/courses/professi... Professional CSS: https://bytegrad.com/courses/professi... All courses: https://bytegrad.com/courses 🔔 Email newsletter (get notified of new courses): https://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 Note that my videos may contain mistakes. Always verify yourself that your code is safe and does what you want it to do for your specific situation. You agree by watching the videos that you are solely responsible for any mistakes in your code. This channel and all its content is owned & operated by ByteGrad Sp. z o.o. with Tax ID: PL6762676561 . . TOP resource to LEARN AI for Developers - https://datacamp.pxf.io/RGyxrR (paid sponsorship & ByteGrad Sp. z o.o. gets commission)