CODEWITHSUNDEEP
csssass
Sathiya Narayanan
Sathiya Narayanan

Reputation: 641

How to use custom classes inside elements in sass

I have declared a css property in sass as below:

.submit-link {
     float: left;
    i{         
      float: left;
      display: inline-block;
      transform: rotate(180deg);
     }
 }

Now I need to add a custom class which would be added to the i element. I tried using &.back-to-home within the element i

.submit-link {
     float: left;
     i{
        &.back-to-home
        {
          float:right !important;
        }
        float: left;
        display: inline-block;
        transform: rotate(180deg);
    }
 }

But it doesn't work. I tried adding as &:back-to-home too. It didn't work. How can I add the custom class to the above sass. Any help would be much appreciated. Thanks in advance. Cheers

Upvotes: 1

Views: 1536

Answers (1)

Andy Holmes
Andy Holmes

Reputation: 8067

Not sure what isn't working for you, but I've created this simple demo and its working fine:

HTML:

<i>Test</i>
<i class="back-to-home">Home</i>

SCSS:

i {
  color: white;
  background: red;
  padding: 10px;

  &.back-to-home {
    background: blue;
  }
}

jsFiddle - https://jsfiddle.net/kr29b1dn/

Upvotes: 2

Related Questions