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)