Choosing a parent element with SASS/SCSS

I'm facing a slight issue with SCSS syntax while creating a small component using the BEM methodology. Here's the HTML:

<div class="message message--success">
        <div class="message__title">
          BEM Example
        </div>
        <div class="message__content">
          <p>BEM Example text</p>
        </div>
      </div>

Here's the SCSS code:

.message {
  display: block;
  width: 300px;
  border-radius: 5px;
  border: 2px solid #000;
  padding: 10px;

  &__title {
    font-size: 18px;
    line-height: 1;
    color: #000;
    margin-bottom: 10px;
  }

  &__content {
    font-size: 15px;
    color: #000;
  }

  &--success {
    border-color: #3f9442;

    &__title {
      color: #3f9442;
    }

    &__content {
      color: #3f9442;
    }
  }
}

In the code above, the .message--success class applies direct styles (like border-color), but styling for title and content doesn't. How can I target .message as the parent for &__title and &__content within &--success?

htmlcsssassbem

Answer №1

To improve readability, you have the option to write both selectors using the full classname (without using the symbol &) or you could create a reference to the .message class and utilize it within the nested selector

.message {

  display: block;
  width: 300px;
  border-radius: 5px;
  border: 2px solid #000;
  padding: 10px;

  $this: &; /* reference to the .message class */

  &__title {
    font-size: 18px;
    line-height: 1;
    color: #000;
    margin-bottom: 10px;
  }

  &__content {
    font-size: 15px;
    color: #000;
  }

  &--success {
    border-color: #3f9442;

    /* utilize the stored reference */

    #{$this}__title {
      color: #3f9442;
    }

    #{$this}__content {
      color: #3f9442;
    }
  }
}

Answer №2

Follow this method 

.note {
  display: block;
  width: 300px;
  border-radius: 5px;
  border: 2px solid #000;
  padding: 10px;

  &__heading {
    font-size: 18px;
    line-height: 1;
    color: #000;
    margin-bottom: 10px;
  }

  &__details {
    font-size: 15px;
    color: #000;
  }

  &--positive {
    border-color: #3f9442;
    .note{
      &__heading {
        color: #3f9442;
      }

      &__details {
        color: #3f9442;
      }
    }
  }
}

https://jsfiddle.net/lalji1051/21b3cksm/4/

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

"Resolving the issue with unnecessary line breaks in Optimizepress when input is contained within a paragraph

I am experiencing an issue with the code on my server: <p>This is a test to determine why the <input type="text" style="text-align: center;" value="input"/> element appears on a new line when displayed on a wordpress page.</p> When view ...

htmlcsswordpress

Troubleshooting issues with adding rows to an HTML table

I want to include two buttons at the top of my page: Save and Cancel. These buttons should only appear after clicking the Submit button on the Customer Information panel. However, when trying this, the Customer Information panel is pushed down while I al ...

htmlcssangularjsforms

Ensuring consistent height for CSS divs and buttons

Is there a way to ensure that my buttons have the same height as the questlist_item? Even after applying the same CSS height:auto;, the heights remain unequal. Any suggestions on how to achieve equal button heights? Thank you! var questlist = [{...}]; ...

htmlcss

Supervise the interaction of users on the Express application

Recently, I began using Express and encountered a situation where I have a <table> on the users page with a link in each row to delete the entry. Whenever a user clicks on one of these links, I need to delete that entry from the database. Since this ...

htmlnode.jsajaxexpressurl-routing

The parent div will not accommodate two nested divs

I'm having an issue with two divs inside a parent div not being contained within the container when I inspect the page, even though I've wrapped the div around the other 2 divs. My goal is to apply attributes to the parent div instead of each in ...

htmlcss

Conceal and reveal text with a simple user click

Currently, I am working on a website project that utilizes bootstrap. However, I am facing some uncertainty regarding how to effectively hide and display text: <nav class="navbar navbar-light" style="background-color: #e3f2fd;"> ...

javascripthtmlcssbootstrap-4

Customize default progress bar in browsers

One feature of my website allows users to update their personal information, profile image, background image, and more. After clicking the submit button, a loading screen appears with a progress percentage displayed at the bottom left corner of the page (i ...

javascriptjqueryhtmlcss

The issue with Bootstrap 4 Carousel caption not displaying below 768px is still unresolved

I am currently attempting to customize the appearance of my carousel caption, but I have noticed that when I minimize the screen, the caption disappears. I came across a solution in another forum post suggesting to remove the "d-block d-m-block" classes, b ...

htmlcssbootstrap-4

Mixing two elements for a continuous animation without the use of JavaScript

I'm interested in creating an animation that cycles between "0% interest free credit" and "free delivery". I am attempting to achieve this without the use of JavaScript, but so far I can only make the first element fade away without the second one fad ...

htmlcsscss-animations

Optimizing SEO with asynchronous image loading

I've been developing a custom middleman gem that allows for asynchronous loading of images, similar to the effect seen on Medium. Everything is functioning smoothly, but I'm uncertain about the impact on SEO. The image tag in question looks like ...

javascripthtmlseo

React-Native-Web generates default classes for inline styles and erroneously applies them in a jumbled sequence

Currently working on a project involving react native web and NextJS. I have encountered an issue with inline styles in React that seems to be caused by RN-Web. It appears that there is a mechanism within the framework that automatically generates classes ...

cssreact-nativenext.jsreact-native-web

Using an inline-block within a positioned absolute element

I am curious about the behavior of inline-block elements inside absolutely positioned elements. To better explain, I have provided an example below. We can see in the code snippet why the .icon within the .tag is not displayed like the previous .icon (whic ...

htmlcsscss-position

Struggling to extract information from HTML code through Python web scraping techniques

Hello there! I'm currently in the process of extracting dividend history data for a specific stock from a website using web scraping in Python. However, being new to Python, I'm facing some challenges in retrieving the data. Below is a snippet of ...

pythonhtmlcsvweb-scraping

Django has the ability to display images from static files, however, it is not capable of

I am facing an issue with my Django project where my static files (css and images) load properly when referenced in an html tag, but when I try to set a background image using CSS (background: url('images/mypic.png') or url('../images/mypic. ...

htmlcssdjango

Tips for Enhancing JavaScript Performance

Is there a way to enhance my JavaScript code like this: $(window).scroll(function() { if ($('#sec1').isVisible()) { $('.js-nav a.m1').addClass('active'); } else { $('.js-nav a.m1').removeClas ...

javascriptjqueryhtml

Utilizing JavaScript Fetch with User Input to Integrate OpenWeather API Retains Previous Data on HTML Page

I have been working with JavaScript Fetch to retrieve data from the OpenWeather API. In my project, I have created a form where users can input the name of a city to view its weather information. However, I am facing an issue where the data from the previo ...

javascripthtmljsonfetchopenweathermap

Tips for separating the 'title' and 'icon' elements within Bootstrap panels?

I am currently working on integrating a FAQ section into my website (not yet live, so I cannot provide a link). However, I am facing some minor CSS issues that I am struggling to resolve. The problem lies in a panel that is meant to display as shown below: ...

htmlcssbootstrap-4accordionpanel

The content in the footer is not displaying correctly (Vuejs)

I recently developed a component with a title and a background color meant to cover the entire page, but it seems to have a top margin that I can't seem to remove. Additionally, I created a footer component that should always stay at the bottom of the ...

htmlcssvue.jsbackgroundfooter

What is preventing these elements from being contained within particular divs?

I'm facing an issue with my HTML code and need some help unraveling what's happening. On my simple website, I have a container div, header div, and body div, but it seems like the HTML elements are not aligning properly within these divs (they a ...

htmlcss

Having trouble with the flexbox flex-direction: column property not functioning properly with the textarea element in Firefox?

Inconsistencies between Chrome and Firefox have been noticed in the following example. While the footer height is set to height:40px and appears fine in Chrome, it seems smaller in Firefox, around 35px. Any specific reasons for this difference? Link to t ...

htmlcssflexbox