Access a partial within a partial

[andrerogers]

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

[andrerogers]

I even tried using the following project (https://github.com/jasonsanjose/brackets-source-map-demo-files) to see if I get any of the above errors, and I do.

It seems like the contents of individual partial files are not being included in the rest. So for example if I declare variables in _config.sass and try to use those variables for the mixins in _mixins.sass, they cannot be used and throw an unbound error.

[nicolo-ribaudo]

Can't reproduce.

I can compile brackets-source-map-demo-files and a test I wrote (https://gist.github.com/nicolo-ribaudo/f16caa7ff30ec9835a00) both.

[andrerogers]

I re-installed the extension. It worked. I feel like an idiot for not doing that sooner.

[onetrev]

I have the same problem, however...

The thing is the variables work and main.scss file compiles despite the SASS linter telling me unbound variable whenever I use a variable in my partials. As ong as I don't try to include a partial in a partial it compiles fine. Any help would be really appreciated!

My .brackets.json file looks like so:

{
    "sass.enabled": false,
    "path": {
        "library/scss/main.scss": {
            "sass.enabled": true,
            "sass.options": {
                "outputDir": "../css/",
                "includePaths": ["utils","base","components","extras","layouts","pages","vendor"],
                "imagePath": null,
                "sourceComments": true,
                "outputStyle": "nested"
            }
        }
    }
}

[andrerogers]

Try, re-intsalling the extension.

OR

Try using this file structure (if your not using something similar),

 scss
       |->_utils.scss
       |->_base.scss
       |->_components.scss
       |->_extras.scss
       |->_layouts.scss
       |->_pages.scss
       |->_vendor.scss
       |->main.scss

And in your .brackets.json file replace

 "includePaths": ["utils","base","components","extras","layouts","pages","vendor"]

with

 "includePaths": ["scss"],

[onetrev]

I tried re-installing previously... no dice.

Unfortunately that file structure doesn't work for me and would go against one of the key best practices of SASS, breaking up different pieces into folders, I'd end up with 30 or so files all in that /scss folder. Thanks for the idea though!

There has to be a way to make this work when partials are in their own folders.

[andrerogers]

I know, I tried breaking them down into the folders i.e. base, layout, modules, states, and util.

If I tried to import a partial from another partial it doesn't get imported, but it does if you try to import it from the main file. Its a weird problem, which I have no idea how to fix.

[onetrev]

Yeah, exactly, I agree!!

I think you should re-open this issue then, as we have essentially the same experience. And I can confirm another dev I work with is also finding the same problem.

[jasonsanjose]

@onetrev thanks for the report. Can you give me more details so I can try to figure this out?

1. Folder contents

Based on your first comment, I assume you have:

/project-root
--/library
----/css
----/scss
------/utils
--------probably-some-partials.scss
------/base
------/components
------/extras
------/layout
------/pages
------/vendor
------main.scss

2. File contents - what do your @import statements look like?

For reference, you might look at my example bourbon project https://github.com/jasonsanjose/bourbon-example/tree/1.0.4 (use this 1.0.4 tag since I've recently updated master to use a newer version). The example imports bourbon, here's the settings:

{
    "sass.enabled": false,
    "path": {
        "scss/app.scss": {
            "sass.enabled": true,
            "sass.options": {
                "includePaths": [
                    "../bower_components/bourbon/dist/"
                ],
                "outputDir": "../css/",
                "imagePath": null,
                "sourceComments": false,
                "outputStyle": "nested"
            },
            "linting.collapsed": false
        }
    }
}

In the file scss/app.scss, I have @import "bourbon" and the main file imports everything from subdirectories like this:

// bower_components/bourbon/dist/_bourbon.scss

// Settings
@import "settings/prefixer";
@import "settings/px-to-em";
@import "settings/asset-pipeline";

// Custom Helpers
@import "helpers/gradient-positions-parser";
@import "helpers/linear-positions-parser";
@import "helpers/radial-arg-parser";
@import "helpers/radial-positions-parser";
@import "helpers/render-gradients";
@import "helpers/shape-size-stripper";
...

[onetrev]

Excellent, glad you are on the case! I will try to help as best I can....

1. Folder Contents

• Correct that is my exact file structure. Utils folder is indeed where the partial with my variables is located.
• I have folders underneath this technically as my project is a WordPress theme, but as far as brackets is concerned that is my project root. Just wanted to make sure I gave you all the info, just in case

2. main.scss has all my @imports, and they looks as such...

// Sass variables
@import "utils/variables";
// Sass functions
@import "utils/functions";
// Mixins import
@import "utils/mixins";
// Normalize
@import "base/normalize";
// Core styles
@import "base/core";

.... and so on.....

But even though I import the variables first, the error as reported shows up in the linter when using a variable in say my /base/_core.scss file

[jasonsanjose]

Ah, so while editing /library/scss/base/_core.scss you see an error, but compiling /library/scss/main.scss works fine?

Sounds like something went wrong when the source map is compiled.

Long story short, I use the source map to figure out what the main input file is. So, when linting /library/scss/base/_core.scss, it should resolve to /library/scss/main.scss. From there, we lint main.scss (in a shadow copy of the project) and try to only show errors for the active file _core.scss.

Can you show me the contents of /library/css/main.css.map? Are you on mac, win or linux?

[onetrev]

Correct, compiling works fine despite seeing error while editing. Makes sense why the two differing results.

Here is my map file: https://gist.github.com/onetrev/ae1c1a9b3383bf0e8653

[jasonsanjose]

@onetrev try this dev build https://github.com/jasonsanjose/brackets-sass/releases/tag/2.0.1-105.

Added fix to PR #100. Tagging v2.

The problem was that we didn't identify the correct input file (in this case /library/scss/main.scss). There were also some downstream code that never implemented errors for partials correctly.

Tested on mac and win for both libsass and ruby.

[onetrev]

Awesome, that was fast! And it works perfectly from my initial testing. Variables in my partials are now recognized and everything continues to compile. Not sure why, as I didn't fully understand the includePaths in the first place, but I don't even need those anymore.

Just wondering quickly, what is the upgrade path now that I have this version? I'm not sure how betas like this work in Brackets. I should still get notified when a new public release comes out right?

Thanks again.

[jasonsanjose]

Thanks for the feedback @onetrev.

You will see an update notification in extension manager once I post the final build. Due to another bug though, you'll need to manually uninstall first, then install the update.

[jasonsanjose]

Fix in #100. Closing.

[andrerogers]

I updated the extension, and now, the files won't compile and generate the .css file.

[jasonsanjose]

@andrerogers21 is your project the same as you described initially? #87 (comment)

[andrerogers]

The file structure is now like this,

 root
      ->css
      ->sass
           ->base
                ->_base.sass
           ->layout
                ->_panel.sass
           ->modules
                ->_images.sass
           ->states
                ->_hidden.sass
           ->util
                ->_config.sass
           ->style.sass

My .brackets.json file is as follows,

 {
     "path": {
         "../sass/style.sass": {
             "sass.enabled": true,
             "sass.options": {
                 "outputDir": "../css/",
                 "includePaths": [
                     "../sass",
                     "../sass/base",
                     "../sass/layout",
                     "../sass/modules",
                     "../sass/states",
                     "../sass/util"
                 ],
                 "sourceComments": false,
                 "outputStyle": "nested"
             },
             "linting.collapsed": false,
             "useTabChar": false
         }
     }
 }

[jasonsanjose]

path settings in .brackets.json assume the file is in the project root (the folder you have open in Brackets). The path you have ../sass/style.sass won't work since it uses the parent path ../. Can you move the file and fix the paths or is there some other reason you have this setup?

[andrerogers]

I changed the file to this

 {
     "path": {
         "sass/style.sass": {
             "sass.enabled": true,
             "sass.options": {
                 "outputDir": "css/",
                 "includePaths": [
                     "sass",
                     "sass/base",
                     "sass/layout",
                     "sass/modules",
                     "sass/states",
                     "sass/util"
                 ],
                 "sourceComments": false,
                 "outputStyle": "nested"
             },
             "linting.collapsed": false,
             "useTabChar": false
         }
     }
 }

It still doesn't work. Have attached a screenshot.

[jasonsanjose]

I think you want this:

     {
         "path": {
             "sass/style.sass": {
                 "sass.enabled": true,
                 "sass.options": {
                     "outputDir": "../css/",
                     "includePaths": [
                         "base",
                         "layout",
                         "modules",
                         "states",
                         "util"
                     ],
                     "sourceComments": false,
                     "outputStyle": "nested"
                 },
                 "linting.collapsed": false,
                 "useTabChar": false
             }
         }
     }

Note that the paths (like outputDir and includePaths) are relative to the file being compiled.
Assuming your `style.sass has imports like

@import "base";
@import "normalize";
...

Are you seeing any compiler errors or anything from the console Debug > Show Developer Tools?

[andrerogers]

Its working. Thank you.