CODEWITHSUNDEEP
htmlcsssassfocusextend
Jason_C
Jason_C

Reputation: 41

SASS custom value isn't working on focus elements

I am trying to add a focus styling to an element. However, I have ::focus and a class .focus. Since I'm using SASS thought it would be easier to create my own style value then @extend it to the two focuses to save on coding.

But whenever I write it, it isn't working and the styling just doesn't appear. If any one has any ideas as to why it would be greatly appreciated thanks.

Heres a small example of the code I've got.

%button-styling {
  color: $grey;

  %btn-focus { 
    color: $white;
  }
  
  &::focus,
  &.focus {
    @extend %btn-focus;
  }
}

Upvotes: 0

Views: 115

Answers (1)

hamid-davodi
hamid-davodi

Reputation: 1976

As Sass docs said, any complex selector that even contains a placeholder selector isn't included in the CSS .... So it is not meaningful to put %btn-focus inside %button-styling placeholder. For me these styles in a scss file work fine:

$grey: red;
$white: #FFF;
%btn-focus {
  color: $white;
}
%button-styling {
  color: $grey;
  &:focus,
  &.focus {
    @extend %btn-focus;
  }
}

button {
  @extend %button-styling;
}

And in your html you may have something like this:

<div>
  <button class="focus">btn-focus</button>
</div>
<!-- or -->
<div>
  <button>btn-focus</button>
</div>

Upvotes: 1

Related Questions