Yes you can use SASS variables with Microthemer. Here are some instructions / recommendations:
Go to General > Preferences > CSS/SCSS and set Enable SCSS (at cost of linting/autocomplete) to “Yes”
Save your Preferences
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
The keyboard shortcut Ctrl + Alt + C is useful for switching between the code and GUI view
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.
So as an example, you could enter: $padding: 30px; at the top of the code editor.
And then you could enter $padding in the GUI padding fields.
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.
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?
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.
