June 28, 2023

WordPress CSS Nesting with SASS and SCSS using WP Code Box

Play Video

Nicholas Arce will explain to you WordPress CSS Nesting using SASS and SCSS with WP Code Box! If you’re a WordPress user aiming to streamline your CSS process, this guide is for you. CSS nesting is a method that can drastically improve the readability and maintainability of your CSS code. With nesting, you’ll significantly reduce the amount of CSS you write, making your WordPress development process more efficient.

What is WordPress CSS Nesting?

Nesting in CSS is a way of organizing your CSS code in a way that makes it easier to read and maintain. It involves grouping CSS selectors that share the same parent, reducing the need to repeat the same selectors multiple times. When working with WordPress, CSS nesting becomes an essential tool for managing your site’s styles effectively.

Creating a WP Code Box Snippet for Your CSS

Before we start nesting, we need to create a new WP Code Box snippet where we’ll place our CSS. Here’s how to do it:

  1. Go to your WordPress dashboard and navigate to WP Code Box.
  2. Click on “Add New” to create a new snippet.
  3. Name your snippet. For this tutorial, we’ll name it “Global”.
  4. Set the type to “SCSS”.
  5. Change the loading method to “External”.
  6. Enable “Auto Reload Changes”. This means you won’t have to refresh the page every single time you make a change to your CSS.
  7. Click “Save”.
Creating a WP Code Box Snippet for Your CSS
WP Code Box Snippet Settings

Now, you have a new WP Code Box snippet where you can place your CSS. As you follow the rest of this tutorial, you’ll be adding your CSS to this snippet.

Getting Started with WordPress CSS Nesting

To demonstrate how nesting works, we’ll focus on styling a few components: a primary button, a secondary button, and two forms (light and dark).
Styling CSS components

First, we’ll start with the form. We want to style the input and the text area of our form. In our example, we’ve given the form a class of “form-light”. We’ll target this class, and then target the form itself. Here’s what our CSS would look like without nesting:

.form-light .fluent-form input,
.form-light .fluent-form textarea {
  /* styling */
.form-light .fluent-form input:active,
.form-light .fluent-form textarea:active {
  /* styling */

As you can see, we’ve had to repeat “.form-light .fluent-form” multiple times. This can become cumbersome and hard to manage as our CSS grows. Now, let’s transform this CSS into SASS using nesting:

.form-light {
  .fluent-form {
    input, textarea {
      /* styling */
      &:active {
        /* styling */

With nesting, we’ve significantly reduced the amount of repetition in our CSS. We’ve also made our CSS easier to read and manage.

Applying WordPress CSS Nesting to Other Elements

We can apply the same nesting concept to other elements, such as buttons. Here’s how we can style a primary button and its hover state using nesting:

.btn--action {
  /* styling */
  &:hover {
    /* styling */

Common Issues with WordPress CSS Nesting

While WordPress CSS nesting can streamline your development process, it’s not without its potential issues. Here are a few common problems you might encounter:

  • Over-nesting
    While nesting can make your CSS more organized, overdoing it can lead to overly complex code that’s hard to read and maintain. As a rule of thumb, try to avoid nesting more than three levels deep.
  • Specificity issues
    Nesting can increase the specificity of your selectors, which can make it harder to override styles later. Be mindful of this when organizing your CSS.
  • Code repetition
    If you’re not careful, you might end up repeating the same styles in different nested selectors. To avoid this, consider using SASS’s @extend feature to share styles between selectors.


Nesting is a powerful feature of SASS and SCSS that can make your CSS more readable and maintainable. By grouping CSS selectors that share the same parent, you can reduce the amount of CSS you write and make your CSS easier to manage.

In the next part of this series, we’ll be exploring other powerful features of SCSS like partials and @mixins. Our goal is to make your WordPress development process as efficient and enjoyable as possible, and SCSS is a key part of that.

Required Resources

WP Code Box Logo
Free Options
Credit to Nicholas Arce
Nicholas Arce creates WordPress tutorials. His content is easy to understand and perfect for anyone who wants to improve their skills.
WordPress CSS Nesting with SASS and SCSS using WP Code Box
Welcome back!
Enter your Helwp credentials to sign in.

No Account yet? Sign Up

My Account
Give Feedback
Describe your feedback *
Rate Helwp
Problem *
Describe the problem
Want us to reply?
Your E-Mail
Affiliate Disclosure

At Helwp, we’re committed to transparency and honesty. Therefore, we want to inform you that some of the links on our website are affiliate links. This means that, at no additional cost to you, we may earn a small commission if you click through and make a purchase.

We only promote products or services that we genuinely believe in. These affiliate commissions help us to maintain the website and continue to provide you with free, high-quality WordPress content.

If you are interested in how you can support us even further, check out our support page.