I found this method to easily add `@media` block using mixin:

```
@mixin phone() {
    @media only screen and (max-width: 480px) {
        @content;
    }
}

```

To use it, just simply type something like this:

```
p {
    @include phone { ... }
    span {
        @include phone { ... }
    }
}

```

But the **problem** lies in the real CSS output:

```
@media only screen and (max-width: 480px) {
  p { ... }
}
@media only screen and (max-width: 480px) {
  p span { ... }
}

```

It **duplicates** the `@media ...` part which will bloat the CSS.

Is there a way to make the mixin act like placeholder? So it will combine all `@content` and put it under the same `@media ...` block.

So the result will be like

```
@media only screen and (max-width: 480px) {
    p { ... }
    p span { ... }
}

```

I know I can just put the `@include phone` at the end of the file and write all the necessary styles in that block.

But writing the media-query style right besides the original one makes it easier to read and organize.

Thanks