1

Problem: Changing partial that a sass file imports, doesn't appear to cause the sass file to generate a css file.

Info: I'm using libsass (have tested both via SassyStudio Visual Studio plugin, and via Grunt with the libsass package grunt-sass. See below for details:

In the sass file file.scss:

@import '_file.scss';

In the partial sass file _file.scss:

body {
    background-color: magenta;
}

When I save the partial file, libsass detects the change in _file.scss but I get no updated file.scss and no file.css changes.

If I then save the file.scss once again I see detected changes from libsass, and now my file.css contains:

body {
    background-color: magenta;
}

What does it not detect the partial file change and automatically compile those sass files importing that partial? Is this intended, or am I doing something wrong?

Further information: To clarify this a little more, the issue seems to be that saving the partial doesn't cause the non-partial sass files to be recompiled with the updated data from the partials. So if I had a _forms.scss partial file, and wished to update a form input element padding, I would need to save _forms.scss and then save all the files which import _forms.scss to get the change. Which seems a little wrong to me.

Ian Smithers
  • 173
  • 1
  • 9
  • Are you using Visual Studio? If you are, you should try [Web Essentials](http://vswebessentials.com/). If that path interests you let me know in the comments and I'll post an answer with my settings and file structure. – Drops Jun 01 '15 at 10:02
  • @Drops I did have Web Essentials previously, I'm open to that path again but this question is really aimed at understand **how** SASS should be working, so that I can determine if I have any existing issues or problems I can solve. – Ian Smithers Jun 01 '15 at 10:07
  • Well, I'm not 100% sure how that should work, but I can tell you that I'm right now changing sass partials and looking at the freshly and correctly compiled css (without saving main sass file). When I edit mixin partial that is included in other partials which is included in main sass file, main css is recompiled respectively. – Drops Jun 01 '15 at 10:12
  • In Web Essentials **SASS** options there is `Auto-compile dependent files on save` option, set it to `true`. Other thing is that there is no support for indented sass syntax yet, so watch out for that too. And I've used [this guideline](http://thesassway.com/beginner/how-to-structure-a-sass-project) for file structure, and as you can see there are cases of multiple nesting of partials. – Drops Jun 01 '15 at 10:18
  • @Drops When you say 'indented sass syntax' - what do you mean specifically? Also as a comparison can I can ask how long your sass takes to compile? Our project is a decent size, I would say ~80 sass files. Naturally not all of these are importing every partial, but certainly an average dependant count would be somewhere between 6-12. P.S. That guide you linked is what I used as well. :) – Ian Smithers Jun 01 '15 at 10:23
  • Well I have just counted :) and there are about 30 files there which compile to about tad bellow 15k css lines, not minified, so you get a aprox. picture of number of props. I had to break that one file in two (because sometimes it compiled for 30 secs!) and now we have separated vendors stuff and own our code. Our own sass compiles in about 1-2 secs (3-4k lines) other, vendor file (~10k lines) compiles for 10-15 secs, sometimes more, but i rarely touch that file so I'm ok... [Indented syntax](http://sass-lang.com/documentation/file.INDENTED_SYNTAX.html) – Drops Jun 01 '15 at 10:30
  • @Drop I think you answered the question - which is that SASS does handle multiple level imports, as to why my setup at present doesn't detect the partial chages and update the non-partial file - I guess that is for another question. Add an answer and I will mark it as correct. Thanks! – Ian Smithers Jun 01 '15 at 10:44
  • No need (and that would be one sucky answer :) ), I'm glad that I helped a bit, if any. Let's wait and see, maybe someone has a real answer, I'm also very interested in reading about this. Cheers mate. – Drops Jun 01 '15 at 10:47
  • What command are you running? If you're watching a single file, it likely will not pickup on changes to anything other than the watched file. – cimmanon Jun 01 '15 at 13:26
  • How did you resolve this? I know this is an old question. I would suggest keeping the file names different so it is more readable and not cause any confusion . Also skip the underscore and suffix in your Sass import directive. I never had such an issue and I do load multiple levels of partials in my project. – santon Jun 09 '16 at 23:33

0 Answers0