Sass in Visual Studio Code

|Part -1

You’ve probably heard of CSS preprocessors like Sass, LESS, or Stylus, and they’re all great tools for keeping your CSS up to date, especially when dealing with large codebases. For the uninitiated, here’s a rundown:

If you have some CSS knowledge, the good thing is being started to learn sass.
I’ll be dwelling on Sass in this Article. It is by far the most widely used preprocessor today. I’ll explain what Sass is and how to compile it into standard CSS, as well as some of the features that make it so efficient.

What is SASS?

Sass is a pre-processor for CSS. Sass reduces CSS duplication and thereby saves time. CSS is entertaining on its own, but stylesheets are becoming bigger, more complicated, and more difficult to manage. A preprocessor can assist in this situation. Sass allows you to use features that aren’t yet available in CSS, such as variables, nesting, mixing, inheritance, and other useful features that make writing CSS more enjoyable.

If We use bootstrap, we can use only a few colors for our project. An example, we can use blue color as a primary, but how we use purple color for our project. So, we can use SASS for that. Not only purple, but we can also use any color like that. That a special in SASS.

The easiest way to do this is in your terminal. You can use the sass command to compile your Sass to CSS once it’s installed. You’ll need to inform Sass where to output CSS and which file to construct from.

SASS vs SCSS

• SCSS (aka Sassy CSS) is the modern standard. Its syntax is very similar to CSS in that it uses brackets and semi-colons. Even normal CSS is valid in this syntax. The file extension is .scss

$font-stack:    Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

• Sass is an older syntax that focuses on indentation to separate code blocks and newline characters to separate rules. It has the file extension .sass

$font-stack:    Helvetica, sans-serif
$primary-color: #333
body
  font: 100% $font-stack
  color: $primary-color

But these two output is same. I’ll use SCSS in this article because it’s the more natural syntax. It’s also great for transforming standard CSS to SCSS so you can only paste the CSS in and start working!

How we install Sass to our Visual Studio Code project

You must have npm enabled on your machine before we begin; it is included with Node.js and can be downloaded from here.

Install it now if you haven’t already. If you’re not sure what Node.js is installed, type

node -v

in your terminal . It’s installed if you see a version number!

Then open your project in VS code and initialize our project using

npm init

command. if you are press Enter button, They ask some quations from you such as package name,version,Description text command like wise. You can fill it as your passion. finally you press Enter, you can see a package.json file in your project.
Open your package json file, you can find your package name, version and other information that you created before.
Now you can install sass to your project.

Type

npm i -g sass

in your terminal to install sass in global

Then create a sass folder and create sass file(style.scss) inside it
Then again go to package.json file and create “start” attribute

We have here specified style.scss as our main Sass file, and style.css as the compiled CSS file.

package.json file

It’s also a good idea to have a — watch flag in your script. The watch flag tells the compiler to keep an eye on the source files for improvements and to automatically recompile to CSS if you save your Sass files. Re-save the script after adding — watch.

Finally go to your terminal and type

npm start

and run your code.

Now you can see style.css and style.css.map files are automatically created.

What is style.css.map?

It is a Less can be used to produce the bootstrap CSS. The map file’s main objective is to compare the css source code to the less source code in the chrome dev tool. We used to do it that way. In the chrome dev tool, we can inspect the feature. CSS source code can be viewed. However, if the map file is used in the page with the bootstrap css file. The fewer coding that refers to the element style you want to check can be seen.

Next next article we can see how to write code in style.scss and how import that codes into style.css file

Happy cording..🎉🎉