Hello, I’ve really enjoyed nesting with SCSS but PG does not fully support it in the GUI. I prefer to organize like this so all my code for one parent declaration is in one place.
One big help would be if we could edit @media declarations that are nested inside the parent declaration. Right now the @media selector can be seen inside the GUI but if you try to click on the property inside of the @media you cannot change values or add new properties.
My code also allows for a CSS Mixin that allows me to quickly add media breaks in a parent. For example an @media for above my small breakpoint would have an @include bp(sm) {scss goes here} which also can be seen in GUI but not added to or changed. I love using the GUI and it would be awesome if this nesting feature could be supported.
When I discovered Pinegrow, I was so happily surprised to see how flawlessly all the GUI options sync with the code! It would make Pinegrow even better if we would see this type of support for SCSS!
Hello, unfortunately the new Grid update has not enabled us to use the UI for nested @media or @include nested inside a declaration. Here’s a short video that shows the issue with the UI: Screen Recording 2022-05-26...
@jonroc sorry, I posted the “The feature is now in PG Live” to the wrong thread (has been deleted). It was meant to go into the SASS compilation issue thread.
That said, a better, tree based CSS/SASS editor is coming to PG soon.
Hi @matjaz , it’s been a while on this… I was hoping this may be addressed in this last update but not yet. Is this really a big update to fix? I imagine your function that allows nested class declarations to work in the UI looks for a string starting with a period ( like .classname ), would it not be as simple as allowing that function to also accept the “@” symbol in addition to the “.”? It’s picking up the nested media queries but it’s not letting me add to them in the UI (even though the top part where you can manually change fields works). -Thanks!
