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
