How do I used this on sub-scss pages?

[smlombardi]

I have a typical project for us. It's an AngularJS single-page-app, and the app is linked to app.css. There is, of course, an app.scss.

There are different sections of the app. I am working on the "feedback" section, for example. So, in the "feedback" directory there's a file _feedback.scss with style info for that section, which is imported into the app.scss and compiled by Gulp Sass or Codekit.

So, in my editor I have feedback.html and _feedback.scss open for editing. LiveStyle shows every css file linked, including app.scss and every bower component with a css piece.

Do I need to open app.css even though I am not editing it, to link it to LS? I'd rather not. I saw something in the instructions about a json file, although the instructions were confusing.

Is it possible to use LS in this case?

[sergeche]

No, you don’t have to open original app.scss file. You can connect browser file with any css/less/scss file opened in editor and LiveStyle will transmit changes between them (e.g. will not overwrite entire file)

[smlombardi]

I see. I still can't get any results.

I added the open file _feedback.scss as a user style sheet at the bottom of the list in the chrome extension.

I go to a property in this scss file that I had just set earlier today: h3 { margin-top: 0; } change it to "80px"

Nothing.

Save the scss file, gulp processes it and browsersync injects it, the h3 jumps down 80px as expected...

[sergeche]

Check DevTools at <h3> tag, the most common problem is selector specificity. PS: you can connect _feedback.scss with your app.css browser file

[sergeche]

If still nothing happens, check for background.html file of LiveStyle extension as described here: http://livestyle.io/docs/troubleshooting/ Also, issues might be introduces by BrowserSync, try to disable it

[smlombardi]

As for selector specificity, the h3 is nested in scss that compiles to .splitview-white-open .leftnav h3

[sergeche]

Well, that’s the problem. Right now LiveStyle is not able to trace nested @import and generate proper selector with outer context, this feature might be added in future

[smlombardi]

The background html page is spewing rows of warnings and a few errors. I can see that several are missing sass variables, although these are in assets/sass/settings/_variables.scss . I create a livestyle.json, perhaps I did it wrong?

{
    "globals": ["modules/**/assets/sass/*.scss", "assets/**/*.scss"]
}

[sergeche]

livestyle.json looks fine. All paths are relative to folder with livestyle.json?

[smlombardi]

Yes.

I guess if LS can't process scss nested rules yet, then I can only really use in on simple css projects. So far, it has worked well with Wordpress sites, editing the styles.css on the ftp server and showing results as I edit. Which is quite helpful.