scss 注意力mixin.scss

Posted 2021-05-18

// When we give an element some ‘attention’.
@mixin attention() {

    &:hover,
    &:active,
    &:focus {
        @content;
    }

}

a {
    font-weight: bold;
    text-decoration: none;
    color: #c00;

    @include attention() {
        outline: none;
        color: #09f;
    }

}

.btn {
    background-color: #09f;

    @include attention() {
        background-color: darken(#09f, 10%);
    }

}