Tips for choosing a parent element using SCSS

Question

Tips for choosing a parent element using SCSS

Here is an example of HTML:

<ul id="navbar-main" class="navbar-nav mr-auto">
    <li class="nav-item active">
        <a href="https://travian.dev/materials" class="nav-link nav-materials">
            <span class="invisible">Materials</span>
        </a>
    </li>
</ul>

Additionally, here is some SCSS:

#navbar-main {
  li {
    &.nav-item {
      .nav-link {
        width: 50px;
        height: 50px;
        background: no-repeat center;
        background-size: contain;

        &.nav-materials {
          background-image: url('../images/buttons/menu-materials.png');

          .active { // this is used to select .nav-item.active .navlink.nav-materials
            background: red;
          }
        }
      }
    }
  }
}

While the code is functioning, there is a desire for increased maintainability and readability. The aim is to achieve a structure like the following:

#navbar-main {
  li {
    &.nav-item {
      .nav-link {
        width: 50px;
        height: 50px;
        background: no-repeat center;
        background-size: contain;

        &.nav-materials {
          background-image: url('../images/buttons/menu-materials.png');

          .active { // here something to actually select .nav-item.active .navlink.nav-materials
            background: red;
          }
        }
      }
    }
  }
}

css sass scss-mixins

Answer 1

Answer №1

It never crossed my mind that inserting part of a selector between the parent selector in Scss could be done in a way that is maintainable, but perhaps there's a way...

Prior to delving into it, I found some valuable resources: the Sass Ampersand article on CSS-Tricks which discusses using mixins beyond the standard cases where `&` can be utilized, and also `#{&}` for using `&` twice (something I learned after struggling with `&&` and `li&`, sigh).

The mixin provided as is wouldn't cater to your specific scenario, which led me to create my own approach:

A Scss mixin that accepts 3 parameters to construct various selectors and any rule set

➡️ Codepen demo

@mixin nav-bg($parent, $active, $sel) {
  @at-root #{$parent} {
    &#{$active $sel} {
      @content;
    }
  }
}


#navbar-main {
  li {
    &.nav-item {
      .nav-link {
        width: 50px;
        height: 50px;
        background: no-repeat center;
        background-size: contain;
      }

      @include nav-bg(&, '', '.nav-materials') {
        background-image: url('../images/buttons/menu-materials.png');
      }

      @include nav-bg(&, '.active', '.nav-materials') {
        background: red;
      }
    }
  }
}


// output
#navbar-main li.nav-item .nav-link {
  width: 50px;
  height: 50px;
  background: no-repeat center;
  background-size: contain;
}
#navbar-main li.nav-item .nav-materials {
  background-image: url("../images/buttons/menu-materials.png");
}
#navbar-main li.nav-item.active .nav-materials {
  background: red;
}

If your aim is to maximize maintainability, I highly recommend revamping your nesting techniques and reducing selector specificity.
Here's how I would rewrite your code block:

➡️ Simplified selectors (Codepen)

#navbar-main {
  .nav-link {
    width: 50px;
    height: 50px;
    background: no-repeat center;
    background-size: contain;
  }

  .nav-materials {
    background-image: url('../images/buttons/menu-materials.png');
  }

  .active {
    .nav-materials {
      background: red;
    }
  }
}

Sass references: [@content](http://sass-lang.com/documentation/file.SASS_REFERENCE.html#mixin-content), [@at-root](http://sass-lang.com/documentation/file.SASS_REFERENCE.html#at-root)

I would also suggest substituting the id with a class, even for components that are presumed to be unique on a page. I resisted this change for quite some time, but it proved to be beneficial in avoiding unnecessary complications...

Keeping CSS selectors concise by CSSWizardry is a good starting point (explore archives from 2012 to 2016 for more insights) CSS methodologies for scalable styles:

Answer 2

It never crossed my mind that inserting part of a selector between the parent selector in Scss could be done in a way that is maintainable, but perhaps there's a way...

Prior to delving into it, I found some valuable resources: the Sass Ampersand article on CSS-Tricks which discusses using mixins beyond the standard cases where `&` can be utilized, and also `#{&}` for using `&` twice (something I learned after struggling with `&&` and `li&`, sigh).

The mixin provided as is wouldn't cater to your specific scenario, which led me to create my own approach:

A Scss mixin that accepts 3 parameters to construct various selectors and any rule set

➡️ Codepen demo

@mixin nav-bg($parent, $active, $sel) {
  @at-root #{$parent} {
    &#{$active $sel} {
      @content;
    }
  }
}


#navbar-main {
  li {
    &.nav-item {
      .nav-link {
        width: 50px;
        height: 50px;
        background: no-repeat center;
        background-size: contain;
      }

      @include nav-bg(&, '', '.nav-materials') {
        background-image: url('../images/buttons/menu-materials.png');
      }

      @include nav-bg(&, '.active', '.nav-materials') {
        background: red;
      }
    }
  }
}


// output
#navbar-main li.nav-item .nav-link {
  width: 50px;
  height: 50px;
  background: no-repeat center;
  background-size: contain;
}
#navbar-main li.nav-item .nav-materials {
  background-image: url("../images/buttons/menu-materials.png");
}
#navbar-main li.nav-item.active .nav-materials {
  background: red;
}

If your aim is to maximize maintainability, I highly recommend revamping your nesting techniques and reducing selector specificity.
Here's how I would rewrite your code block:

➡️ Simplified selectors (Codepen)

#navbar-main {
  .nav-link {
    width: 50px;
    height: 50px;
    background: no-repeat center;
    background-size: contain;
  }

  .nav-materials {
    background-image: url('../images/buttons/menu-materials.png');
  }

  .active {
    .nav-materials {
      background: red;
    }
  }
}

Sass references: [@content](http://sass-lang.com/documentation/file.SASS_REFERENCE.html#mixin-content), [@at-root](http://sass-lang.com/documentation/file.SASS_REFERENCE.html#at-root)

I would also suggest substituting the id with a class, even for components that are presumed to be unique on a page. I resisted this change for quite some time, but it proved to be beneficial in avoiding unnecessary complications...

Keeping CSS selectors concise by CSSWizardry is a good starting point (explore archives from 2012 to 2016 for more insights) CSS methodologies for scalable styles:

Answer 3

Answer №2

In my opinion, it's difficult to find ways to enhance the original SCSS you provided. The Sass parent selector (&) chooses the entire chain of parents.

One alternative, albeit a bit awkward, is to utilize @at-root to go back to the root of your style sheet, and then modify a section of your selector like this:

/// Modify `$search` with `$replace` within `$string`
/// @author Hugo Giraudel
/// @param {String} $string - Initial string
/// @param {String} $search - Substring to update
/// @param {String} $replace ('') - New value
/// @return {String} - Revised string
@function str-replace($string, $search, $replace: '') {
  $index: str-index($string, $search);
  
  @if $index {
    @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
  }
  
  @return $string;
}

#navbar-main {
  li {
    &.nav-item {
      .nav-link {
        width: 50px;
        height: 50px;
        background: no-repeat center;
        background-size: contain;

        &.nav-materials {
          background-image: url('../images/buttons/menu-materials.png');

          @at-root #{str-replace(#{&}, ".nav-item", ".nav-item.active")} {
            background: red;
          }
        }
      }
    }
  }
}

Answer 4

In my opinion, it's difficult to find ways to enhance the original SCSS you provided. The Sass parent selector (&) chooses the entire chain of parents.

One alternative, albeit a bit awkward, is to utilize @at-root to go back to the root of your style sheet, and then modify a section of your selector like this:

/// Modify `$search` with `$replace` within `$string`
/// @author Hugo Giraudel
/// @param {String} $string - Initial string
/// @param {String} $search - Substring to update
/// @param {String} $replace ('') - New value
/// @return {String} - Revised string
@function str-replace($string, $search, $replace: '') {
  $index: str-index($string, $search);
  
  @if $index {
    @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
  }
  
  @return $string;
}

#navbar-main {
  li {
    &.nav-item {
      .nav-link {
        width: 50px;
        height: 50px;
        background: no-repeat center;
        background-size: contain;

        &.nav-materials {
          background-image: url('../images/buttons/menu-materials.png');

          @at-root #{str-replace(#{&}, ".nav-item", ".nav-item.active")} {
            background: red;
          }
        }
      }
    }
  }
}

Tips for choosing a parent element using SCSS

Answer №1

Answer №2

Similar questions

Toggle switch unable to reset upon reloading the page

Facing compatibility problems with JavaScript and Cascading Style Sheets in Google Chrome?

Troubleshooting spacing and padding problems in Bootstrap 5.2.3's Scrollspy feature

Causing an element to extend beyond its parent element's boundaries

Struggling to decide on the perfect CSS selector for my puppeteer script

Having trouble showcasing two unordered lists side by side on a single line

Menu sliding in causes horizontal scroll bar to appear

The image appears distorted when viewed in the Safari browser

What is preventing Firefox and IE from displaying images fully in a list item?

During DragAndDropToObject in Selenium IDE, the initial element in the list is overlooked

How can I add a % symbol to user input in a text input field?

Preserve the location of a moveable div using jQuery

Customizing Material UI Stepper styles using CSS API

How come I am able to reference a component in styled-components while others cannot?

Tips for displaying a button when hovering over it on large screens and larger sizes

The Parcel build was unsuccessful due to an error from @parcel/resolver-default: The file '../../../../../css/main.css' could not be loaded within the './src' directory

What could be causing the bootstrap card alignment issue when trying to display them side by side

Blurry text can be a common occurrence when applying the transform(-50%,-50%) function to center

Display updated text on hover over button panel

Replace Css styling with custom styling in external stylesheet