Access a partial within a partial #87

andrerogers · 2015-01-30T10:44:11Z

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

The text was updated successfully, but these errors were encountered:

andrerogers · 2015-02-02T11:52:57Z

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 · 2015-02-02T14:25:39Z

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 · 2015-02-02T17:38:31Z

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

onetrev · 2015-03-04T05:30:12Z

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 · 2015-03-04T05:57:22Z

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 · 2015-03-04T06:30:48Z

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 · 2015-03-04T06:42:40Z

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 · 2015-03-04T06:45:06Z

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 · 2015-03-04T16:42:39Z

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

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

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 · 2015-03-04T17:39:25Z

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

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

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 · 2015-03-04T17:49:20Z

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 · 2015-03-04T18:03:38Z

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

…tials.

jasonsanjose · 2015-03-04T23:47:21Z

@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 · 2015-03-05T02:06:15Z

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 · 2015-03-05T17:02:20Z

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 · 2015-03-05T20:01:32Z

Fix in #100. Closing.

andrerogers · 2015-03-10T11:03:54Z

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

jasonsanjose · 2015-03-10T16:51:49Z

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

andrerogers · 2015-03-10T17:41:37Z

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 · 2015-03-10T17:46:41Z

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 · 2015-03-10T17:50:54Z

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 · 2015-03-10T18:07:53Z

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 · 2015-03-10T19:30:40Z

Its working. Thank you.

andrerogers closed this as completed Feb 2, 2015

andrerogers reopened this Mar 4, 2015

jasonsanjose self-assigned this Mar 4, 2015

jasonsanjose added the triaged label Mar 4, 2015

jasonsanjose added this to the v2.0 milestone Mar 4, 2015

jasonsanjose added a commit that referenced this issue Mar 4, 2015

fix issue #87. compile correct input file when showing errors for par…

c7896e2

…tials.

jasonsanjose added the fix in progress label Mar 4, 2015

jasonsanjose mentioned this issue Mar 4, 2015

Upgrade to node-sass 2.0.1 #100

Merged

jasonsanjose removed the triaged label Mar 5, 2015

jasonsanjose closed this as completed Mar 5, 2015

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Access a partial within a partial #87

Access a partial within a partial #87

andrerogers commented Jan 30, 2015

andrerogers commented Feb 2, 2015

nicolo-ribaudo commented Feb 2, 2015

andrerogers commented Feb 2, 2015

onetrev commented Mar 4, 2015

andrerogers commented Mar 4, 2015

onetrev commented Mar 4, 2015

andrerogers commented Mar 4, 2015

onetrev commented Mar 4, 2015

jasonsanjose commented Mar 4, 2015

onetrev commented Mar 4, 2015

jasonsanjose commented Mar 4, 2015

onetrev commented Mar 4, 2015

jasonsanjose commented Mar 4, 2015

onetrev commented Mar 5, 2015

jasonsanjose commented Mar 5, 2015

jasonsanjose commented Mar 5, 2015

andrerogers commented Mar 10, 2015

jasonsanjose commented Mar 10, 2015

andrerogers commented Mar 10, 2015

jasonsanjose commented Mar 10, 2015

andrerogers commented Mar 10, 2015

jasonsanjose commented Mar 10, 2015

andrerogers commented Mar 10, 2015