Brackets-SASS Plugin setup

Brackets is a cool , superb and free IDE with a ton of useful plugins! One such is the Brackets SASS plugin.

On a personal laptop, its a straight forward stuff. Go to the Install extensions, search for Brackets SASS, Click install. But from a proxy, we will be forced to do the Manual Installation most times.
Once installed, we need Brackets to auto compile the required sass files and provide the css output at a folder we want.

If we click install, it might show an Installation failed error.

Go to this site and download the below zip. (first one )

Once downloaded, drag and drop the same into the "Drag zip here or Install from URL" button.

Then go to Debug tab > Reload With extensions.

To configure the same, go to here.
Copy the below section from that site.

Once done, Create a " .brackets.json"  at the root of the project: ( Dont forget the dot in front )

Copy paste the thing which we have copied before into this .brackets.json custom file which we have created and placed in the root.

Here is the code version for copy pasting:

{
    "sass.enabled": false,
    "sass.compiler": "libsass",
    "path": {
        "scss/styles.scss": {
            "sass.enabled": true, 
            "sass.options": {                
                "outputDir": "../css/",
                "imagePath": null,
                "sourceComments": false,
                "outputStyle": "nested"
            },
            "linting.collapsed": true
        }
    }
}

What we say here basically is:
Take the styles.scss file inside the scss folder for auto compiling. Let the output be placed inside the css folder which is one level back, on the same level as scss folder. Let the output css style be nested.
There are a lot more options configurable, kindly check the link for full options.

Restart brackets. And so a Reload with Extensions from Debug tab above ( just in case! )
Listen: Sometimes, we may not see the same getting complied first, Dont panic!

Just go to styles.scss once and simply press a space and save once more to trigger the compiling externally. At times, Brackets behave strangely, refusing to compile the same as and when we write something. Run the index file now.

Damn! It worked. 

No this is the most simple and straight forward stuff. In a real project, we might be having a lot of nesting structures for our sass folders.

Nesting:

A sample workflow will be having a partial folder inside of which i will be creating variables.scss, mixins.scss, extend.scss, module specific or functionality specific scss files and then importing them together in one styles.scss file which is complied to get the corresponding css file.

One such folder structure is shown above. We have a partials folder inside of which we have a "_variables.scss" folder holding all variables, colors, font sizes, padding, margin, url paths etc.

In our styles.scss, we have imported the same first.

Run the same and we get the same output as we got last time, but this time, we have created partial files. Keep adding partial files as needed, just that dont forget to import them in the styles.scss file.

Go to the ".brackets.json " file, change the "outputStyle" to "compressed" for a minified css output.
That will be handy if we are having a production version of the styles with a smaller footprint than its development version.

BOOTSRAP'S SASS INTEGRATION: 

Plugin: Bootstrap-sass
I thought since everything was already done as far as proxy was concerned (which we looked at the previous post here), it was a straight one line command to install. But not as i expected. I was still being played around by the damn proxy.

I tried running the -   npm install bootstrap-sass command. But it throwed some freaky certificate issue.

Went around searching stackoverflow again :
Try these steps first.

Try running the first command and then the npm install bootstrap-sass command.
Else try the second one and repeat the same trial.

If not once, then it will work on third attempt! Thats what legend says. Try the next command.

NB: make sure, we navigate to the scss folder first before installing the bootstrap sass. ( I want it inside the sass folder, just a personal preference, not a mandate )

Dibly dobly doooo!! Hail God...Finally it got installed... I was about to go for lunch, and my appetite had gone off once i saw the same installed without errors!

Take a look at the folder structure.

See a node_modules folder created inside scss? An inside that, our bootstrap-sass folder? Thats what we want!
In our styles.scss, we first include the bootstrap import, followed by our partial:

@import "node_modules/bootstrap-sass/assets/stylesheets/bootstrap";
@import "partials/variables";  

html{
    height:100%;    
}

body{
    min-height:100%;
    background-color:$bg-main;
    color: $fg-color;
}   
.red{
    min-height:50px;
    background-color: $red;
}

Added in _variables.scss

$bg-main: #004C70;//color
$fg-color: #ffffff; 
$red: #b90b10;

And in our index.html, add the "red" class .

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="css/styles.css" />
</head>
<body>
    
    <div class="container-fluid">
        <div class="col-md-3 red">.col-md-1</div>
        <div class="col-md-3 red">.col-md-1</div>
        <div class="col-md-3 red">.col-md-1</div>
        <div class="col-md-3 red">.col-md-1</div>
    </div>
    
</body>
</html>

Now run the index.html,

Bootstrap is up and running! Maaaaaaaan! ...