sass - 我可以在断点内设置 Sass 变量吗？

Question

这个问题在这里已经有了答案:





Using Sass Variables with CSS3 Media Queries

(8 个回答)


6年前关闭。




是否可以在单个 sass 断点内设置一次变量的值，而不是每次使用该变量时？

换句话说，我想这样做:

$tab: 600px;
$wp: 100%;

@include breakpoint($tab) {
    $wp: 95%;
}

.alpha {
    // ...
    width: $wp;
}

.beta {
    // ...
    width: $wp;
}

.gamma {
    // ...
    width: $wp;
}

... 而不是这个:

$tab: 600px;
$wp: 100%;
$wp-tab: 95%;

.alpha {
    // ...
    width: $wp;
    @include breakpoint($tab) {
        width: $wp-tab;
    }
}

.beta {
    // ...
    width: $wp;
    @include breakpoint($tab) {
        width: $wp-tab;
    }
}

.gamma {
    // ...
    width: $wp;
    @include breakpoint($tab) {
        width: $wp-tab;
    }
}

我认为第一种方法不会按原样工作。有没有另一种方法可以达到相同的结果？这种方法是个坏主意吗？

Answer 1

这是不可能的。

报价 nex3 ，Sass的开发者:

While this would be pretty cool, it's very much contrary to the existing semantics of a Sass stylesheet. What you've outlined already has a meaning: it sets the variable twice in sequence and then accesses it (modulo some scoping issues). The sequential and largely imperative nature of Sass means that the sort of automatic duplication of rules you're describing becomes very complex. We actually considered something very similar for handling SassScript &, and ended up realizing that it was effectively impossible to do so and preserve the existing semantics.

The best approximation you can do right now is to put the styles that need to vary in a mixin with parameters and include that in your media queries.

来源:https://github.com/nex3/sass/issues/1227