How to read the code what I wrote in Stylus locally

[Erimus-Koo]

I want to locally read and manipulate code written in a programming language like Python or JS.

I've tried some methods:

1. Post the styles to userstyles.world, then read it from the URL. But this method needs me to update my CSS first, not real-time as I wrote in stylus.
2. Read the Chrome's leveldb, but this is too hard for me.
3. Read the cloud sync, but it's also not real-time.
4. I mentioned that while I edit in Stylus between two computers, another one will receive a modified notification. There should be some connections, and can I read from it?

Or some other suggestions? thanks.

[tophf]

Stylus doesn't have such API, so the only way is to use a local .user.css file, open it in the browser, and enable [x] Live reload checkbox in the installer, so that it'll track your edits as long as it's open, see https://github.com/openstyles/stylus/wiki/Writing-UserCSS#initial-installation-and-live-reload

[Erimus-Koo]

Use a local .user.css file, I have not done this before, but I'll have a try. Is that a real-time preview while I modify it?

And one more question, I there some method to make Stylus support scss or less?

[Erimus-Koo]

And the code highlighting

[tophf]

It should just work automatically. Maybe you've used .user.css literally which confused your editor becuase that's a convention for hidden linux files, in which case use foo.user.css with your style name in place of foo.

[Erimus-Koo]

Yes, I opened it in vscode and everything looks fine. It seems that it just doesn't work well in sublime text, maybe it needs some special plugins.

[Erimus-Koo]

1. The first time I open my_style.user.css in Chrome, it will enter the Stylus tab page and display an install button. Choose to install.
2. To edit the local file my_style.user.css and enable live reload, need to open the file again in Chrome and check the live reload option.
3. Clicking the edit button directly on the Stylus plugin panel will not modify the local file but only change the content in the indexed db.

Is my understanding correct?

If I did step 3 and directly modify the code on Stylus' page, do I need to manually merge it into the local file?

[tophf]

Correct. You should edit your file externally to keep it synchronized.

[Erimus-Koo]

But I found that I prefer the formatter built into Stylus.
I mean, it puts multiple selectors and properties on one line, and with the sections panel in the Stylus sidebar, it allows me to quickly locate my code.

Can vscode do something similar? I really have almost 20 sections. Prettier brought so many lines and scrolls to me.