Within a specific div, I want to make focused buttons to look exactly like non-focused buttons.

Is there a way I can express that in sass/scss?

Something similar to this:

.myDiv {

 > button {

    &:focus {
      @extend &:not(&:focus)
    }
  }
}

Alternatively, can I disable all rules that are applied only because of the definition for pseudo-class :focus ?

3 Answers

2
maryisdead On

You could use placeholder selectors. Something along the lines of this:

%button {
    color: red;
}

button {
    @extend %button;

    &:focus {
        color: green;
    }
}

.myDiv {
    > button:focus {
        // Extend from %button again, thus overriding through specificity.
        @extend %button;
    }
}
2
Karl On

You can simply overwrite the default styling by doing this below

.myDiv {
 > button {
    &:focus {
      outline: none;
    }
  }
}

If you needed to use extend, you could do something like this

%no-focus {
   outline: none;
}

.myDiv {
 > button {
    &:focus {
      @extend %no-focus;
    }
  }
}

However, I advise you read this article from the a11y project - which explains why in terms of it's not good to un-style :focus'd elements in terms of accessibility.

0
Community On

Here, I explain simply. Please see the code below.

HTML:

<div class="mydiv">
  <button>My Button</button>
</div>

SCSS:

* {
  outline: none;
}
.mydiv {
  button {
    border: 1px solid #000;

    &:focus {
      border:1px solid #ccc;
    }
  }
}