Hey folks,
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.

Then an Item called “Instant CSS” will appear on the WordPress left sidebar and hover on it and click Instant CSS. You will see something like below.
Write scss wordpress

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.

Live Editor

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.

Then you will get a page like below with the hope page preview. You can change the page by using the navigation menu.
Write scss wordpress

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.