How to install Sass in brackets text editor

Ahmer Ali Ahsan picture Ahmer Ali Ahsan · Jul 7, 2016 · Viewed 17.3k times · Source

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 reference

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.

Answer

Ahmer Ali Ahsan picture Ahmer Ali Ahsan · Jul 11, 2016

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.