Sass - Retain the original class hierarchy

Apologies for the vague title, I couldn't think of a better one.

As I compile my scss, this piece of code:

.foo {
  ...
  &__bar { ... }
}

transforms into the expected output below:

.foo { ... }
.foo__bar { ... }

However, I actually need it to look like this:

.foo { ... }
.foo .foo__bar { ... }

with the .foo selector preceding the .foo__bar.

Is there a Webpack plugin or any other solution that could help me achieve this?

I have come up with two workarounds, but I'm hoping to find something more efficient:

.foo {
  ...
  & &__bar { ... }
}

// or

.foo {
  ...
  .foo__bar { ... }
}

Answer №1

In order to achieve the desired outcome

.example { ... } .example .example__item { ... }

It is important to structure your SCSS code as follows:

.example { ...... &.example__item { ....... } }

We suggest trying this approach and observing the results.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Ways to utilize CSS for capturing user-inputted text in a text field

I have a question about incorporating user input text into CSS styling. Specifically, I am looking to create a color background option (#ffffff) where the designer can input their own color and have it displayed once saved in the body background style. Wh ...

Adding borders to div elements for mobile display

Almost done with my website homepage, but I'm noticing some pesky borders/outlines on mobile devices. This issue doesn't seem to pop up on computers, so you'll need an iPhone, tablet, or smartphone to see what I'm talking about. Check o ...

Having difficulty incorporating an NPM package into a Laravel project

For years, I've been utilizing Laravel for my projects, but it's only recently that I decided to incorporate NPM packages into my Laravel apps. My development environment of choice is Laravel Valet. Currently, I'm grappling with integrating ...

What is the best way to make a CSS class appear in my javascript using the method I have been using before?

I am facing an issue in making this code work properly. It functions correctly for my caption element as there is only one caption tag in my HTML. However, the same code does not work for my TR element since it requires a for loop to iterate through multip ...

What is the most efficient method for implementing absolute imports in Webpack 2?

I'm currently working on configuring Webpack for a React project and I'm looking to streamline how I import my components. Ideally, I want to import components like this: import ComponentName from "components/ComponentName" Instead of the more ...

Change the size of a custom cursor on click using React

I have customized the cursor on my react app, but I want to make it animate when the user clicks. Perhaps by decreasing its size or some other effect. The cursor is within a component that I've included in my Index.js file. I am unsure how to create a ...

What is the best way to eliminate excess spacing between HTML td and table elements in Outlook?

Here's the HTML email code snippet. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Co ...

Creating a scrolling effect similar to the Nest Thermostat

After researching countless references, I am determined to achieve a scrolling effect similar to the Nest Thermostat. I came across this solution on this JSFiddle, but unfortunately, the parent element has a fixed position that cannot be utilized within my ...

Owl carousel issue: Fixed position not functioning properly

To view the page with the issue, click here I am attempting to make the column (div) day/date headers sticky when they scroll out of view so that users can always see what day they are looking at. Instead of directly manipulating the header itself, I have ...

JavaScript code that moves the active link to the top of the navigation when the window width is less than or equal to 800px

I'm working on a responsive navigation that is fixed at the top and switches from horizontal to vertical when the screen size is less than or equal to 800 pixels wide. However, I'm facing an issue with moving the active link to the top of the na ...

Tips for rotating and positioning an element in the top left or top right corner of a page

I recently tried rotating a div with text and wanted to position it at the top left corner. I was able to successfully align it at the top, but I'm having trouble getting it to align with the left edge. Any tips on how to achieve this? .credit { ...

Adjust the checkbox dimensions within the cells of a bootstrap table

I am utilizing bootstrap-table along with a column containing checkboxes. I need to adjust the size of the checkboxes in my code to be 25x25 pixels. However, when I try using the height and width CSS attributes, it does not seem to take effect. html < ...

What steps can I take to display lines in a textarea so that it closely resembles the appearance of a notepad document

Is there a way to display lines in a text-area to give it the appearance of a notepad? I only have one text-area available. See the example notepad below for reference. ...

clicking on a DIV element

I am trying to trigger a JavaScript function by clicking on a DIV element, but for some reason it is not working as expected. I have gone through various examples provided by the helpful people here, but still can't figure out what I'm doing wron ...

To collapse a div in an HTML Angular environment, the button must be clicked twice

A series of divs in my code are currently grouped together with expand and collapse functionality. It works well, except for the fact that I have to click a button twice in order to open another div. Initially, the first click only collapses the first div. ...

Customizing the label styles within MUI's Chip component

Incorporating React with MUI's library has been a seamless experience for me. One of the key MUI components I have integrated is the Chip Within this particular Chip, there lies the label attribute, offering the option to showcase a text f ...

Incorporate a span element within the PHP code located in the final div

Having trouble with adding a span in PHP The last div is not functioning correctly. **In need of help on how to insert a span within PHP code.** echo" <tr> <td>$id</td> <td>$name</td> <td>$la ...

The Opera browser displays a horizontal orientation for vertical menus

Having some trouble with my vertical menu rendering correctly in different browsers. It's appearing horizontal in Opera, but looks good in Firefox and Chrome. I'm pretty sure it's just a small tweak needed in the code, but I can't quite ...

What is the best way to ensure that a <div> extends all the way to the bottom?

My goal is to have this element reach the bottom of the screen, but I also have a header which complicates things. Setting height: 100%; or 100vh results in the page being too big and scrollable. I don't want to manually calculate it because of respon ...

Switch over to using a for loop

I have a query regarding implementing multiple toggles within a for loop. For instance, I want a toggle menu to appear when clicking on a div. Here is the code snippet: for (var i = 0; i < myObjectString.length; i++) { var obj = JSON.parse(myObjectStr ...