How to install Sass in brackets text editor

Question

Duplicate Question?

Yes it is. But a little bit different from this

Overview:

I am also a new user of the brackets text editor. I know the difference between Scss & Sass. But the reason why I am using brackets text editor is for just Sass not Scss.

I saw some tutorials of Jason Sanjose for integrating Sass in brackets text editor. But I think. I am not doing it right. Below is my steps. What I am doing.

• Install Sass for bracket using Extension Manager.
• Install bower and bourbon
• Create folder on root named: "SASS" and inside this folder create app.sass file.
• Create folder on root named: "CSS"

• Create a config file named: ".brackets.json" and put below code inside it:

  {
    "sass.enabled": false,
    "path": {
              "SASS/app.scss": {
              "sass.enabled": true,
              "sass.options": {
              "outputDir": "../CSS/",
              "includePaths": [],
              "sourceComments": true,
              "outputStyle": "nested"
            }
         }
      }
  }
  

  and here is the snapshot also

Question:

When I write below code in app.sass file it is not converting it to css file or creating any css file in output directory.

body
    background-color: black

Now my question is: Please explain me how I convert sass file in css or tell me what I am doing wrong in ".brackets.json" file or in my "app.sass" file.

Solution

After a lot searching on web. I found a useful article and my answer. Which I am sharing with you guys.

Brackets-SASS Plugin setup Step By Step Tutorial Without migrating on other apps.