How do you structure your media queries?

Specifically when you're using a preprocessor.

These are two common ways I've personally done it. How are you doing it?

.foo {
    width: 100%;
}

.bar {
    border-color: red;
}

@media screen and (min-width: 768px) {
    .foo {
        width: 50%;
    }
    .bar {
       border-color: green;
    }
}

and

.foo {
    width: 100%;

    @media screen and (min-width: 768px) {
        width: 50%;
    }
}