Is there a workflow to use Sass variables with Microthemer?

Author Posts

adkoen November 11, 2018 at 10:08 am

Heads up! this post was created when Microthemer was at version 5. The current version is 7. Some references to the interface may be out of date.

How would I accomplish that?
And can the list of my custom variables be used on every page of the website?
thanks,
Koen.

Sebastian November 11, 2018 at 5:14 pm

Hey Koen,

Yes you can use SASS variables with Microthemer. Here are some instructions / recommendations:

  1. Go to General > Preferences > CSS/SCSS and set Enable SCSS (at cost of linting/autocomplete) to “Yes”
  2. Save your Preferences
  3. You can define your SASS variables anywhere, but it might make most sense to define them at the top of MT’s custom code editor: View > Code editor
  4. The keyboard shortcut Ctrl + Alt + C is useful for switching between the code and GUI view
  5. After defining your variables/functions/mixins etc you can enter them anywhere in MT’s GUI fields, or via the inline code editor to the left of the Font property group. There is one annoying exception however, the color picker doesn’t have a field for entering variables (and using the hex/hsl/rgb fields will auto-convert your variable). I know that colors are a primary reason for user variables and I will fix this soon. MT will support variables natively before long, without the need for SASS. I will add support for both MT variables and SASS variables in the picker when I get onto that.
  6. So as an example, you could enter: $padding: 30px; at the top of the code editor.
  7. And then you could enter $padding in the GUI padding fields.
  8. Or in the inline code editor you could enter: padding: $padding;. You might wish to use the inline code editor for adding your color variables until the picker supports this e.g background: $primary-background url(image.png) center center no-repeat.

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

Cheers!
Sebastian

adkoen November 11, 2018 at 5:44 pm

Djeez man, that sounds way more than I thought your software could do 🙂 This looks absolutely fantastic! Going to try it out asap.
So, you’re working on adding your own system of variables? Is that something to expect in the next 6 months, or will it take more work?

Sebastian November 12, 2018 at 10:57 am

Yeah, I think you can expect MT variables in the next 6 months – chase me if not!

The variable system will integrate with the current suggested/recent styles feature on properties that accept numeric values e.g. padding. There is currently an option to save recent suggestions (when you hover over a suggestion), so they don’t get replaced with more recently used values. There will also be a ‘Save as variable’ icon. Clicking this this will load a variable management screen. Existing variables will be also accessible from the suggestions dropdown menu, probably in a similar way that Site styles are made available in the font-family, font-size, and line-height suggestions.

Cheers,
Sebastian

adkoen November 12, 2018 at 7:39 pm

Thanks Sebastian! Looking forward to it 🙂

You must login or register to reply to this topic.