使聚焦按钮看起来像非聚焦按钮

Question

在特定的div中，我想使聚焦按钮看起来与非聚焦按钮完全一样。

有没有办法在sass / scss中表达？

与此类似的东西：

.myDiv {

 > button {

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

---

或者，我可以禁用仅因为伪类:focus的定义而应用的所有规则吗？

Answer 1

您可以通过以下操作简单地覆盖默认样式

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

如果你需要使用extend，你可以做这样的事情

%no-focus {
   outline: none;
}

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

但是，我建议你阅读a11y项目中的this article - 这就解释了为什么在可访问性方面不合适的:focus元素并不好。

Answer 2

你可以使用placeholder selectors。有点像这样：

%button {
    color: red;
}

button {
    @extend %button;

    &:focus {
        color: green;
    }
}

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

Answer 3

在这里，我简单解释一下。请参阅下面的代码。

HTML：

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

SCSS：

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

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