Front-end Tutorials

Front-end Tutorials

HTMLCSSSassJavaScriptReactJS
CMS Tutorials

CMS Tutorials

WordPress
Tutorials expand

Sass Selector

Sass selector-replace() Function

Posted in Sass Tutorial
Updated on Sep 30, 2024
By Mari Selvan
πŸ‘οΈ 13 - Views
⏳ 4 mins
πŸ’¬ 1 Comment
Sass selector-replace() Function

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
Copy To Clipboard
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
Copy To Clipboard
$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
Copy To Clipboard
$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
Copy To Clipboard
@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.

πŸ‘¨β€πŸ’» Join our Community:

To get interesting news and instant updates on Front-End, Back-End, CMS and other Frameworks. Please Join the Telegram Channel:

Author

author
πŸ‘‹ Hey, I'm Mari Selvan

For over eight years, I worked as a full-stack web developer. Now, I have chosen my profession as a full-time blogger at codetofun.com.

Buy me a coffee to make codetofun.com free for everyone.

Buy me a Coffee

Share Your Findings to All

Subscribe
Notify of
guest
1 Comment
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
We make use of cookies to improve our user experience. By using this website, you agree with our Cookies Policy
AgreeCookie Policy