assert-selector mixin

assert-selector.scss

// Assert that the parent selector matches one of the selectors passed into $selectors
// Url: https://github.com/dropbox/scooter/blob/e4d1ffc42e6f4d787fffa94bd96397e9b862a2f3/scss/mixins/_accessibility.scss
@mixin assert-selector($selectors...) {
    &:not(#{$selectors}) {
        /*! You must ensure the element matches one of these selectors: #{$selectors} */
        outline: 2px solid red !important;
        outline-offset: 5px;
        position: relative;

        &:before {
            content: 'You must ensure the element matches one of these selectors: #{$selectors}';
            color: black;
            font: normal 12px/1.2 sans-serif;
            background: yellow;
            padding: 0.2em;
            position: absolute;
            left: 0;
            bottom: 110%;
            width: 300%;
        }
    }
}