New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Multiple media queries in output when using for loop and @at-root #1239

redodo opened this Issue May 4, 2014 · 0 comments


None yet
2 participants

redodo commented May 4, 2014

I have encountered a problem in the CSS output generated by Sass 3.3.7 (Maptastic Maple).

The problem

I have the following SCSS:

@media (max-width: 700px) {
    @for $column from 1 through $columns {
        .medium-#{$column} {
            width: 100% / $columns * $column;
            @at-root (without: media) {
                @extend %box;

In this case, %box is an abstract representation of a floating element with some additional features. Which can only be extended by using @at-root.

The code is compiled to the following 'compressed' output:

/* %box is extended here perfectly */

@media (max-width: 700px) {
    .medium-1 {
        width: 12.5%; } }
/* more media queries for each element */
@media (max-width: 700px) {
    .medium-8 {
        width: 100%; } }

It basically creates a media block for each of the generated elements while the for-loop is contained inside the media query.

When the code is compiled without the @at-root block, all the elements are contained inside a single media query.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment