CODEWITHSUNDEEP
csssass
Deadpool_er
Deadpool_er

Reputation: 255

How to write SCSS for Element => ElementClass => Child Class

Hi I am using a child component which is used globally in my app. So now i want to change few CSS properties for this child component only when it is specific to my requirement. I want to apply different properties for description and end class here. How can achieve this using SCSS and is it possible we can acheive it without important tag ?

*****HTML*******

<my-parent class="parent"> 
//I have added myflag to identify this has to apply only in case of my scenario
 <global-child [class.myFlag]="myFlag===true">
  <div class="child">
    <div class="description">test</div>
    <div class="end">end</div>
  </div>
</global-child>
</my-parent>

This is how i tried to apply my css, it is picking up height but not color for description *****SCSS******

    global-child.myflag{
      height: 100px !important
    &.description{
      color: blue !important
    }
}

Edit 1: Kenny's answer looks good, but it still didn't work for me. The reason i am thinking is below. If that is correct how can achieve this in my scenario.

"I am adding the new CSS in my-parent.scss. And global child component has its styles in global-child component.scss. I believe my new SCSS code(which is parent) is loading before globalchild. Would that be a reason it is not reflecting on the page? "

Edit 2: Updated few changes in HTML above and below are my child and parent css

****global child css****

.child {
  display: flex;
  flex-direction: row;

  &-description {
    width: 100%;
    color: BLACK;
    position: relative;
    }
  }

****Parent css*****

  .parent{
     global-child.myflag {
        height: 100px;

       .description {
          color: blue;
       }
     }
   }

Upvotes: 0

Views: 2183

Answers (2)

Deadpool_er
Deadpool_er

Reputation: 255

Kenny's answer's were right for applying the CSS styles, But the issue for me was due to style scopes in angular. Providing viewEncapsulation as NONE on my angular component resolved the issue for me.

Upvotes: 0

Kiran Shinde
Kiran Shinde

Reputation: 5992

This will work

global-child.myflag {
   height: 100px;

  .description {
      color: blue;
  }
}

Now when to use &

When you have class on same element

Like if you have element like

<global-child class="myflag description">

Then you should use & to apply properties to global-child element

But in your case .description is child of global-child element.

So this will work

global-child {
   &.myflag {
      // css properties

      .description {
           // css properties for `.description` those are child of `global-child.myflag
      }
   }

   .description {
           // css properties for `.description` those are child of only `global-child
      }

}

Upvotes: 2

Related Questions