Today I have an awesome tutorial for you. Have you ever tried to write SCSS when designing websites with Divi theme? Sometimes I hate writing CSS because of nesting. Writing SCSS is way easier and faster than CSS. As SCSS supports lots of cool features like Mixins and Extends, It’s obvious that it’s easy with SCSS.
So, I was finding a way how to write SCSS on the go while design websites. I have seen lots of theme developers use SCSS when developing the theme, but in the end, what they do is converting their SCSS to CSS and ship with the theme.
I haven’t seen many Divi designers and developers write SCSS inside WordPress. But with Instant CSS plugin, we can do just that.
Installing The Plugin To write SCSS on WordPress
Let’s install the plugin. Search “Instant CSS” in the WordPress plugin directory. Click “Install Now” and activate it.
After adding your SCSS click the “Save” button to save your styles or you can simply use the shortcut (Ctrl + S ) on windows and (Cmd + S) on a mac.
If you want to see your changes as you write SCSS you can use the Live editor that comes with this plugin. Click on the “Live editor” link under the “Instant CSS” menu item on the left sidebar.
The changes will appear every time you save the code. You can use the shortcut to save it while writing and observe the changes live without reloading the page.
I hope you guys have enjoyed reading this post and doing it alongside. I’ll see you in the next tutorial. Till then happy designing.