Full support for imported SCSS files 🎉

[paul-hph]

We structure our projects in many SCSS files:

@import 'bourbon';
@import 'vars';
@import 'normalize';
@import 'base';
@import 'fonts'; 
@import 'typography'; 
@import 'head';
@import 'nav';
@import 'content';
@import 'foot';

And those might have even more @import statements within them. I think many web developers use this structure on big projects.

Please support full preprocessing for imported SCSS.

You could make use of SASS source maps to find the corresponding SCSS for each statement.

[sergeche]

LiveStyle can perfectly precess all imports, but they must be reachable (either has valid path relative to current stylesheet or added as global dependency). The difference is how LiveStyle processes these imports. It treats them as source of variables and imports; it doesn’t insert their contents in parent stylesheet, assuming you will manually update file connections when you edit imported stylesheet.

Inserting @import contents doesn’t sound like a good idea: it may require additional processing (e.g. takes more time to update) that is not required for current update. It’s better to automatically wire all imports to their host stylesheet: whenever you change contents of @import, trace it to host and automatically update matched CSS file in browser. But this will require some time to investigate and implement

[paul-hph]

yes i have seen that statement in the docs. So the current livestyle is not usable with the import setup (without rewireing the @import file in the Chrome Extenstion )?

[sergeche]

It depends on how you use LiveStyle. For example, if you edit foot.scss file, you can associate it with compiled browser CSS file and it will work as expected

[paul-hph]

yes that is what i meant with "rewireing". it is a time consuming process too. Would something like this work in your opinion?

1. You make a checkbox next to the Browser Extension CSS List called "Auto associate"
2. You read all connected SCSS files from the sourcemap of the CSS

When editing in Sublime:

3. You check the active File in Sublime Text and auto-associate it to to CSS (if it is in the Sourcemap list).

When editing in the Browser: 3a. You look up the target SCSS file in the Sourcemap? 3b. Open Target SCSS in Sublime (if present) and add CSS

4. Fallback /“Safe patching” mode

[sergeche]

LiveStyle don’t need sourcemaps, it has its own implementation of both SCSS and LESS preprocessors for precise mappings that can’t be done with sourcemaps :)

The ultimate solution is to build a flat dependency list for connected source file and if there’s incoming update from un-connected source file, look for dependency list of connected sources and if there’s a match, apply changes automatically. No need for UI.

This can be (relatively) easy implemented for editor→browser updates, but will require some time for browser→editor updates.

[paul-hph]

ok, so there ist hope this will get easier. Any idea when this might be implemented?

[sergeche]

No ETA right now, need to see what users think about LiveStyle. Maybe in a few weeks or so.

[smlombardi]

FWIW, we use the exact same method of imports as @paul-siteway but ours may also be in subfolders.

[JustasKuizinas]

+1 for support full preprocessing for imported SCSS

[mkormendy]

Having this issue as well. To overcome this I use the add stylesheets to the bottom of the LS Chrome Extension. However, these additions aren't always saved in the list for a site after a refresh on a consistent basis.

In the meantime, I don't see any reason why the dependency list of sass @imports for editing in the direction of editor→browser should be held back. The editing of browser→editor can come at a later time.

I currently prefer editing in the direction of editor→browser anyhow.

[mkormendy]

Curious if there's been any feedback in over 8 months about this.

[sergeche]

Too busy right now and it seems like LiveStyle doesn’t have as much support as I expected so this project it’s in low priority for me right now :(

[franciscolourenco]

Seems like a chicken and egg problem. LiveStyle won't make this work if people don't use. But people won't use if they have to choose between Scss imports and LiveStyle. editor→browser would already be golden.