Question

在特定的div范围内，我想使焦点按钮看起来完全像非焦点按钮。

有没有一种方法可以在sass / scss中表达出来？

类似的东西：

[Required]

或者，我是否可以禁用仅由于伪类.myDiv { > button { &:focus { @extend &:not(&:focus) } } }的定义而应用的所有规则？

Answer 1

您可以使用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 2

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

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

如果需要使用扩展，则可以执行以下操作

%no-focus {
   outline: none;
}

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

但是，我建议您阅读a11y项目中的this article-解释为什么就可访问性而言，取消样式:focus元素的样式不好。

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;
    }
  }
}

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

3 个答案: