Support for SCSS Nesting or CSS Highlighting in Atom

Feature Request
1

It would be a huge help for us if Pinegrow supported SASS nesting, Ampersands (with hover, focus, before, after, etc), @include breakpoints, and the likes. Right now they will show in the CSS editor on Pinegrow but you can not click on them to update or add new rules into their brackets.

Another way that would be a workaround (and useful in general) would be to have css highlighted and scrolled to in Atom (like the html is) when you click on an element in Pinegrow’s css editor. That way we would not have to constantly be searching for the class by hand in Atom.

2

Ok, so in the last update some of the features I mentioned have been added. You can now click on nested items in the PG css editor which is great. The only thing you can’t do is click on scss mix ins which we use for @media breakpoints.

It would still be very helpful if PG could highlight the scss in Atom. Thanks PG team, you’re always churning out new updates at such a rapid pace.

3

@jonroc, I am learning SCSS right now. Is this something I should be doing in PG? Being new, I just need it to work so I can learn without having to worry about things that I am ill-equipped to recognize.

4

No, SCSS is really best for hand coding (it’s faster to hand code with it) and variables. So if you don’t need variables it’s actually easier just to use regular CSS with the PG visual editor at this time. But I hope in the future PG will make using SCSS easier and an more native to the visual editor.

1 Like
5

Yeah, I do want to use variables. Oh well. Maybe in the future…

6

You can still use variable and SCCS (we use it on every project). The only down side is the PG visual editor does not handle everything 100% perfectly yet. Especially if you use SCSS mixins.

7

So how do you get around not seeing things in the visual editor?

8

You can see things, but they don’t support nesting automatically so you have to manually drag and drop class into each other. A very basic SCSS setup will work just like regular CSS in Pinegrow.

1 Like
9

I just synced up VS Studio Code with PG. Do you think that if I used Live Server with VS that would take care of the visual issues you were concerned about? I was thinking about writing BEM/SCSS in VS Code.