Month: May 2024

This isn’t specific to Moodle development, but it’s still a great tip!

SCSS is one of my favourite tools for web development. It’s faster and cleaner than writing raw CSS. However, like many others, I often use only a few of its many features. Recently, I discovered a powerful SCSS feature: interpolation combined with the parent selector (.parent-of-root &). In this post, we’ll explore how to use SCSS interpolation to prepend a class to a root selector from within a nested block. This technique can streamline your styling process and keep your code concise and organised.

Let’s dive in and see how it works!

What is SCSS Interpolation?

SCSS interpolation is a feature that allows you to use variables or expressions as part of property names or selector names. It’s like putting placeholders in your CSS code that get replaced with the actual values of your variables when the SCSS is compiled into CSS.Here’s a simple example:

$color: red;

.box {
  border: 1px solid $color; // This will be compiled to: border: 1px solid red;
}

$side: top;

.element {
  padding-#{$side}: 10px; // This will be compiled to: padding-top: 10px;
}

In the first example, the variable $color is used directly in the border property value. In the second example, the variable $side is interpolated into the property name padding-#{$side}, resulting in padding-top.

Using SCSS Interpolation to Prepend a Class to Root Selector

We all know about the parent selector (&) in SCSS. It makes it super easy to add pseudo-classes to the outer selector or style the outer selector in a certain context, with a specific parent. However, did you know you can combine it with interpolation to prepend a class to the root selector. This is especially useful for theming or modifying styles based on certain conditions.

An Example For Y’all

SCSS

.parent-class {
    .child-element {
        color: white;
        .additional-class#{&} {
            color: black;
        }
    }
}

This SCSS code will compile to the following CSS:

CSS

.parent-class .child-element {
  color: white;
}
.additional-class.parent-class .child-element {
  color: black;
}

Breaking Down the Example

1. Root Selector (.parent-class): This is the main class we are working with. This could, for example, be the body tag.
2. Nested Selector (.child-element): Inside the root selector, we define styles for a nested element. This can be however deep you are.
3. Using Interpolation and Parent Selector:
   • #{&} inside .additional-class#{&} combines .additional-class with the parent selector’s current context, resulting in .additional-class.parent-class.
   • This allows us to prepend .additional-class to the existing root selector.

Practical Use Case

In our scenario, we had all of our SCSS wrapped in a body selector e.g. body.page-group { }. We needed to change the style of a nested element, which was a few levels deep. This style change should only appear on certain page types within our group of pages e.g. body.page-group.specific-page-type { }.

Note: If you are using the element selector on your root e.g. body, nav, main, you will have to change that to make sure whatever selector is prepended will work as a selector. That’s because .additional-classbody.original-class won’t give you what you desire.

Conclusion

Using SCSS interpolation to prepend a class to a root selector provides a flexible way to manage and apply styles conditionally. This technique enhances the maintainability of your stylesheets and can be particularly useful in complex projects with nested elements and dynamic styles.

By leveraging the power of SCSS, you can create more modular and maintainable styles, making your front-end development workflow more efficient and more FUN. Happy styling!

Useful Resources

• Interpolation Documentation: For more details on SCSS interpolation, refer to the official documentation.
• Stack Overflow Example: For a similar use case and additional insights, visit this Stack Overflow discussion.