css - SCSS 变量 - 同名，不同媒体断点的不同值

Question

我正在创建一个有特定问题的 SCSS 网格 - 我想使用一个变量名，例如 $pad(用于填充值)，但是 $pad变量在不同的媒体断点中需要不同。

首先通过动态创建断点并在其中设置 $pad 值的 mixins 设置变量值。

// Default value
$pad: 0;

@mixin resolution($breakpointName, someOtherValues) { 

    @if ($breakpointName == 'mobile') {
        @media (min-width: 320px) and (max-width: 520px) {   
            $pad: 20px;

            @content; 
        }
    }
    @else {
        @media (min-width: 521px) {   
            $pad: 30px;

            @content; 
        }            
    }
}

当我开始写代码的时候，我想这样使用它

@include resolution(mobile) {
     .test {
         padding: $pad;
     }
}

问题来了。在使用 libsass (NPM gulp-sass) 时，变量 $pad 按我的意图传递，它输出以下 CSS

// THIS IS OK - gulp-sass
@media (min-width: 320px) and (max-width: 520px) {
    .test {
        padding: 20px;
    }
}

但是如果我使用最新的 Ruby SASS 通过 NPM gulp-ruby-sass 编译 CSS，它只输出 $pad 的默认值

// THIS IS WRONG - gulp-ruby-sass 
@media (min-width: 320px) and (max-width: 520px) {
    .test {
        padding: 0;
    }
}

这里的问题在哪里？这是我的想法还是 libsass 或 ruby​​ sass 中的错误？如果我的想法有问题，有没有办法以某种方式实现我想要的？

Answer 1

Ruby Sass 是正确的。您的值应为 0。

LibSass 在功能和行为上有落后的趋势。它正在模拟 Sass 3.3 的行为，它可以自由地从 mixins/函数中访问全局变量。没有一种方法可以同时与 Sass 3.4 和 LibSass 一起使用。访问全局变量所需的语法不向后兼容。

要么降到 Sass 3.3(并忍受已弃用的警告)，要么忘记使用 LibSass。

您的 mixin 需要看起来像这样才能使 Sass 3.4 正常工作:

@mixin resolution($breakpointName) { 

    @if ($breakpointName == 'mobile') {
        @media (min-width: 320px) and (max-width: 520px) {   
            $pad: 20px !global;

            @content; 
        }
    }
    @else {
        @media (min-width: 521px) {   
            $pad: 30px !global;

            @content; 
        }            
    }
}