@content VS normal additional rules

Question

What is the difference between doing:

@mixin test($color: #000) {
    border: 1px solid red;
    color: $color;
}

@mixin extension($color: #000) {
    @include test($color);
    background-color: #eee;
}

or doing the following?

@mixin test($color: #000) {
    border: 1px solid red;
    color: $color;

    @content
}

@mixin extension($color: #000) {
    @include test($color) {
        background-color: #eee;
    }
}

is there any difference in the resulting CSS?

I cannot see the convenience of the @content directive.

score 1 · Accepted Answer · edited May 23 '17 at 12:21

The @content directive allows you to have a selector inside of your mixin and inject specific styles within that selector. The most common use case is a media query:

@mixin bp($i) {
    @media (min-width: $i) {
        @content;
    }
}

.foo {
    color: red;

    @include bp(30em) {
        color: green;
    }
}

Other popular uses include abstracting keyframes declarations, placeholder selectors, or other selectors that require prefixes.

@content VS normal additional rules

1 Answers1