Question

我在SASS中设置了一些变量，如下所示：

// fundamental layout variables
$raw-layout-var-1: 60px;
$raw-layout-var-2: 200px;

// calculated layout variables
$calc-layout-var-1: #{$raw-layout-var-1} + #{$raw-layout-var-2};

我正在尝试将这些变量用于媒体查询，因此我可以执行以下操作，并在满足相关条件时更新计算的变量和样式表的其余部分。我希望能够根据需要覆盖基本或计算变量。

@media only screen and (min-height: 500px) {
    $raw-layout-var-1: 120px;

@media only screen and (min-width: 500px) {
    $raw-layout-var-2: 100px;
}

目前我有一个解决方法，变量的所有更新都使用!global关键字全局更新它们，但这会导致一个有点复杂的设置，其中基本变量，计算变量和主要css表放在mixins，在每个媒体查询中调用：

@mixin reset-raw-vars() {
    $raw-layout-var-1: 60px !global;
    $raw-layout-var-2: 200px !global;
}

@mixin update-calc-vars() {
    $calc-layout-var-1: #{$raw-layout-var-1} + #{$raw-layout-var-2} !global;
}

@mixin add-main() {
    div {
        width: $calc-layout-var-1;
        height: $raw-layout-var-1;
    }
}

@media only screen and (min-width: 500px) {
    @include reset-raw-vars();   // resets the raw variables in case these were changed globally in a previous media query
                                 // here you can change any fundamental variables you need
    @include update-calc-vars(); // recalculates calculated variables 
                                 // here you can override how any calculated variables are made
    @include add-main();         // update the rest of the stylesheet with new layout
}

更糟糕的是，如果我有一对媒体查询，例如第二个代码块中显示的那些，我必须手动创建一个同时具有min-height和min-width的混合，以便应用这两个集合条件。显然，这不是干燥的，即使是稍微复杂的响应页面，也可能会严重失控。我可以从Using Sass Variables with CSS3 Media Queries看到SASS没有这个功能 - 有没有比我上面概述的更好的方式？

有没有更好的方法在媒体查询中灵活使用SASS变量？

0 个答案: