Sass selector-replace() Function

Posted in Sass Tutorial

Updated on Sep 30, 2024

By Mari Selvan

👁️ 18 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

The selector-replace() function in Sass allows you to modify CSS selectors by replacing specific parts of the selector string.

This is particularly useful for generating dynamic class names, handling nested selectors, or performing complex selector modifications in a scalable way.

💡 Syntax

The syntax of the selector-replace() function is designed to be intuitive. It takes three arguments:

Syntax

Copied

selector-replace(selector, old, new)

🔢 Parameters

selector: The full selector string where replacements will be made.
old: The part of the selector to replace.
new: The replacement string.

↩️ Return Value

The function returns a modified selector string with the specified replacements applied.

📝 Example Usage

Let’s explore some examples to see how selector-replace() can be applied in various scenarios.

📜 Example 1: Basic Selector Replacement

example.scss

Copied

$selector: '.btn-primary';
$new-selector: selector-replace($selector, 'primary', 'secondary');

.button {
  @extend #{$new-selector};
}

In this example, the .btn-primary selector is transformed into .btn-secondary. The result is that .button will extend .btn-secondary.

📜 Example 2: Modifying Nested Selectors

example.scss

Copied

$selector: '.card .header';
$new-selector: selector-replace($selector, '.header', '.footer');

.card {
  .header {
    color: blue;
  }

  .footer {
    @extend #{$new-selector};
  }
}

Here, .card .header is replaced with .card .footer, allowing .footer to inherit the styles originally intended for .header.

📜 Example 3: Dynamic Selector Names

example.scss

Copied

@mixin generate-button-classes($base-name) {
  $primary-class: selector-replace($base-name, 'button', 'primary-button');
  $secondary-class: selector-replace($base-name, 'button', 'secondary-button');

  .#{$primary-class} {
    background-color: blue;
  }

  .#{$secondary-class} {
    background-color: gray;
  }
}

@include generate-button-classes('.btn-button');

This example dynamically generates two button classes, .btn-primary-button and .btn-secondary-button, with different background colors based on a base name.

🎉 Conclusion

The selector-replace() function in Sass is a powerful tool for modifying CSS selectors. By replacing parts of selector strings, you can create more dynamic and adaptable stylesheets. Whether you’re managing complex nested selectors, generating multiple class variations, or just cleaning up your CSS, selector-replace() can streamline your workflow and enhance your Sass capabilities.

Utilizing selector-replace() effectively can lead to cleaner code and more maintainable stylesheets. Experiment with different scenarios to fully grasp how this function can be leveraged in your Sass projects.