如何使用变量创建 sass 媒体查询？

Question

有没有一种时髦的方式来编写这个 scss 代码并避免重复？

$gutter: 0.5em;
$width-l: 62em;
$width-xl: 98em;
$columns: 4;

.bloc { margin-right:$gutter; }
.content-bloc { margin-right: -$gutter; }

重复部分：

@media (min-width: $width-l) {
    body { width: $width-l; }

    $bloc-width: ($width-l + $gutter) / $columns;

    .bloc-1 { width: $bloc-width - $gutter; }
    .bloc-2 { width: $bloc-width * 2 - $gutter; }
    .bloc-3 { width: $bloc-width * 3 - $gutter; }
    .bloc-4 { width: $bloc-width * 4 - $gutter; }
}
@media (min-width: $width-xl) {
    body { width: $width-xl; }

    $bloc-width: ($width-xl + $gutter) / $columns;

    .bloc-1 { width: $bloc-width - $gutter; }
    .bloc-2 { width: $bloc-width * 2 - $gutter; }
    .bloc-3 { width: $bloc-width * 3 - $gutter; }
    .bloc-4 { width: $bloc-width * 4 - $gutter; }
}

Answer 1

我想出了这个：

@each $width in $width-l, $width-xl { 
    @media (min-width: $width) {
        body {
            width: $width;
        }

        $bloc-width: ($width + $gutter) / $columns;

        @for $i from 1 through 4 {
            .bloc-#{$i} {
                width: ($bloc-width * $i) - $gutter;
            }
        }
}
}