JohnCoates/CSSketch

Two-way Sync with Sketch

WillNeill opened this issue · 2 comments

Currently, saving the .css / .scss / .less file updates the .sketch file, and produces visual changes within Sketch. @JohnCoates's recent updates are excellent and allow a big precision jump in layout specification.

However, one of the great pleasures of Sketch is the GUI. It's simple, intuitive, and sometimes faster to position components this way rather than code. It would be great if changes within the .sketch GUI (i.e. x/y co-ords, width, height, color etc.) are synchronised to the .css file.

I realise this may not be practical or useful with .scss or .less files, be presumably would work for plain .css. Perhaps there's a super clever way of making SASS and LESS work in a live sync workflow too?

Would enjoy discussion about this as a concept / extension to CSSketch

Interesting idea! I see how this could provide a great improvement to a user's workflow.

The challenges to integrate this would be numerous. You're right that it probably wouldn't be practical with .scss or .less, but might be made possible with .css files.

The main issue I see is a usability one. What would be the best way to activate such a feature? Would you establish a two-way link across a whole document, per page, per layer, or per property? When adding a new style to a layer (new fill, border, shadow, etc) where should that be placed? A single layer can match multiple classes, which makes this a difficult feature to integrate.

Positioning could be very difficult because that depends on parent elements.

+1 !