SASS and selectors

Author Posts

Lena March 23, 2022 at 12:12 pm

I’m a newish user and I am still getting used to Microthemer. It’s great, but I have a bit of confusion on a couple of items. I am used to writing my own code and selectors and haven’t really used the visual options yet. I may venture into that eventually. But, for now I’m just trying to get used to the interface.

If anyone can answer the questions below or direct me to the documentation that discusses the items below, I would be most grateful.

1. When SASS is enabled, does it only work in the full-code editor? Or can I write SASS in the default code folder areas?

2. When the full-code editor is enabled, does it turn off the default editor? Or are they both active? I’m trying to understand if I should/could use both areas, or stick to one or the other.

3. Is there a way to turn off the automatic selector creation? I end up with a bunch of empties while I’m trying to figure out what I want.

Thanks,
Lena

(:

Sebastian March 23, 2022 at 2:40 pm

Hey Lena,

Welcome aboard! And sure, I’m happy to answer your questions:

  1. Although you can only define global variables, functions, and mixins in the full code view you can use them anywhere. And you can use nesting in the folder selectors too.
  2. Both the full code and default editor are active. It’s more a case of changing the view when you switch to the full code editor. In terms of how the Sass/CSS is combined, the full code CSS comes first. Go to Settings > General > Generated code to see the contents of the Sass file (draft/active-styles.scss) and the compiled CSS file (draft/active-styles.css). Draft styles contain your latest (possibly unpublished) changes. Active styles are what regular site visitors see (your published styles).
  3. You can turn off automatic selectors by turning off the Targeting mode switch at the bottom right of the interface.

By the way, in a future update the full code view will be replaced by raw CSS/Sass Snippets that can be added to folders, like the single selectors with GUI support are added now. Any code you add to the full code editor will be automatically moved over. This will make it easier to keep your code organised.

I hope that helps. Please let me know if you have any further questions.

Thanks,
Sebastian

Lena March 23, 2022 at 2:50 pm

Sebastian,

Thank you SO much for your explanation and answers. I did search through the documentation and forum first, but just wasn’t quite finding what I needed.

This is most helpful!!! And, I love the future update goals!

Microthemer is really great. I love that all my code is “out there” vs local where I have to create it, compile it, and upload it. Each time I did it didn’t take too long, but it really adds up! Over time I will really be able to learn this program and squeeze all the function out of it!

(:

Sebastian March 23, 2022 at 3:50 pm

You’re most welcome Lena. I’m really glad that Microthemer is speeding up your workflow.

Cheers!
Sebastian

You must login or register to reply to this topic.