CODEWITHSUNDEEP
csshtmlsassadobe-brackets
Andre Rogers
Andre Rogers

Reputation: 47

Using SASS partials in Brackets

So I have started using Brackets as my IDE, and have been trying to get SASS and everything else I need to work on it. So while I was playing around, I realized I was not able to share my partial files with other partial files. Am using the "brackets-sass" extension by jasonsanjose.

My folder structure for sass is as follows,

sass
 |-> includes
          _config.sass
          _base.sass
          _reset.sass
          _utilities.sass
          _helpers.sass
          _main.sass
 style.sass

I have a bunch of variables declared in my _config.sass file, but am not able to access them in any of the other partial files. I would like to know how this would be possible, or if this feature of the extension is yet to be implemented how would I do it.

My .brackets.json file looks something like this,

{
    "sass.enabled": false,
    "path": {
        "sass/style.sass": {
            "sass.enabled": true,
        "sass.options": {
            "includePaths": [
                "../sass/includes"
            ],
            "outputDir": "../css/",                
            "imagePath": null,
            "sourceComments": "map",
            "outputStyle": "nested"
        }
    },

        "sass/includes/*.sass": {
            "sass.enabled": false
        }
    }
}

If i try to import a partial file into another, it prompts the following error, " file to import not found or unreadable: 'includes/config' @import 'includes/config' " and if I try to use a variable in any other partial file from _config.sass i get the following error, " unbound variable $var_name ".

Help would be much appreciated. Thank you.

Cheers

Upvotes: 0

Views: 2621

Answers (1)

user1868148
user1868148

Reputation: 81

Paths and sass.options are in wrong place, I had similar issues.

I have it working with the following preferences in brackets.json Works with multiple entry points and include path directories. Rather than bourbon/neat add your includes.

{
    "sass.enabled": false,
    "sass.options": {
        "includePaths": [
            "../node_modules/node-bourbon/assets/stylesheets",
            "../node_modules/node-neat/assets/stylesheets"
        ],
        "outputDir": "../css/",
        "imagePath": null,
        "sourceComments": false,
        "outputStyle": "nested"
    },
    "linting.collapsed": false,
    "spaceUnits": 2,
    "path": {
        "scss/app.scss": {
            "sass.enabled": true   
        },

        "scss/teaser.scss": {
            "sass.enabled": true
        }
    }
}

Hope that helps!

Upvotes: 2

Related Questions