ONLY 3 REASONS to use Sass in 2022: 1) nesting (great with BEM) 2) better variable syntax than plain CSS: $variable vs var(--variable) 3) some subtle, smaller features like easier comments, use hex code in rgba(), etc. BEST thing we can do with Sass is the nesting feature. It allows us to nicely write media queries together with the relevant selector and helps us out as well with &:hover, &:focus, &::before, &::after, &::placeholder, etc. It is ESPECIALLY beneficial in conjunction with BEM, because with nesting we can write &__element and &--modifier, which saves us from writing out the full long class names in BEM. It also has MUCH BETTER syntax for variables than CSS custom properties. In Sass it's $variable and then use it as $variable. In plain CSS it's --variable and then use it as var(--variable). SOME PEOPLE like to use more advanced features like LOOPS, but the benefits of using those don't outweigh the esoteric nature of them IMHO. This COMPLETE Sass course tutorial will show WHY we even want to use Sass / SCSS in 2022 and how to convert your project from plain CSS to Sass (with the SCSS syntax), including how to compile it with Node.js and NPM. 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 - compiling Sass 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 20:25 - package.json file 20:48 - using NPM-package to compile Sass into CSS 21:34 - npm install sass 31:35 - summary 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 Link to Professional CSS Course: https://bytegrad.com/courses/professional-css?y=1 Link to email newsletter (get notified of new courses with discounts): https://email.bytegrad.com/ #css #sass #scss #sassscss #csssass #webdevelopment #coding #programming
ONLY 3 REASONS to use Sass in 2022: 1) nesting (great with BEM) 2) better variable syntax than plain CSS: $variable vs var(--variable) 3) some subtle, smaller features like easier comments, use hex code in rgba(), etc. BEST thing we can do with Sass is the nesting feature. It allows us to nicely write media queries together with the relevant selector and helps us out as well with &:hover, &:focus, &::before, &::after, &::placeholder, etc. It is ESPECIALLY beneficial in conjunction with BEM, because with nesting we can write &__element and &--modifier, which saves us from writing out the full long class names in BEM. It also has MUCH BETTER syntax for variables than CSS custom properties. In Sass it's $variable and then use it as $variable. In plain CSS it's --variable and then use it as var(--variable). SOME PEOPLE like to use more advanced features like LOOPS, but the benefits of using those don't outweigh the esoteric nature of them IMHO. This COMPLETE Sass course tutorial will show WHY we even want to use Sass / SCSS in 2022 and how to convert your project from plain CSS to Sass (with the SCSS syntax), including how to compile it with Node.js and NPM. 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 - compiling Sass 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 20:25 - package.json file 20:48 - using NPM-package to compile Sass into CSS 21:34 - npm install sass 31:35 - summary 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 Link to Professional CSS Course: https://bytegrad.com/courses/professional-css?y=1 Link to email newsletter (get notified of new courses with discounts): https://email.bytegrad.com/ #css #sass #scss #sassscss #csssass #webdevelopment #coding #programming